时间戳

首页 > 解决方案 > CSS - 添加图标右块引用边框

css - CSS - 添加图标右块引用边框

问题描述

我没有任何开发记录，我想为我的家庭 wiki 获得不同的块引用样式。我发现了这种块引用样式，它们对我来说很棒。我只想添加右边框图标。我该怎么做？（谷歌材料字体图标会很棒） https://i.ibb.co/SrtgChF/Capture.png

谢谢

css 文件：https ://textdoc.co/jvP3XhZCcJ80rxTq

标签： css

解决方案

由于块引用的彩色部分是块引用本身的一部分——即没有不同的元素——你必须直接在块引用中添加 svg 或图标。然后通过您的 css 样式，您可以随意定位它。

在这里，我设置position了图标的 ，absolute以便可以将其移动到块引用的右侧。我还使用了 100% 的高度并transform添加了最后的润色。

看看这个片段：你会在 css 的底部看到我添加的样式。

body{
  background: #f5f7fa;
  margin:10px;
  padding:10px;  
}

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
  /*Font*/
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.2;
  color: #666;
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
  /*Borders - (Optional)*/
  border-right-style: solid;
  border-right-width: 60px;
  border-left-style: solid;
  border-left-width: 5px;   
  border-radius: 15px; 
}


}
blockquote::before{
  content: "201C"; /*Unicode for Left Double Quote*/
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: rtl;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}
  /*Default Color Palette*/
blockquote.default{ 

  border-left-color: #656d77;
  border-right-color: #434a53;  

}

/*Grapefruit Color Palette*/
blockquote.grapefruit{
  border-left-color: #ed5565;
  border-right-color: #da4453;
}

/*Bittersweet Color Palette*/
blockquote.bittersweet{
  border-left-color: #fc6d58;
  border-right-color: #e95546;
}

/*Sunflower Color Palette*/
blockquote.sunflower{
  border-left-color: #ffcd69;
  border-right-color: #f6ba59;
}

/*Grass Color Palette*/
blockquote.grass{
  border-left-color: #9fd477;
  border-right-color: #8bc163;
}

/*Mint Color Palette*/
blockquote.mint{
  border-left-color: #46cfb0;
  border-right-color: #34bc9d;
}

/*Aqua Color Palette*/
blockquote.aqua{
  border-left-color: #4fc2e5;
  border-right-color: #3bb0d6;
}

/*Blue Jeans Color Palette*/
blockquote.bluejeans{
  border-left-color: #5e9de6;
  border-right-color: #4b8ad6;
}

/*Lavander Color Palette*/
blockquote.lavander{
  border-left-color: #ad93e6;
  border-right-color: #977bd5;
}

/*Pinkrose Color Palette*/
blockquote.pinkrose{
  border-left-color: #ed87bd;
  border-right-color: #d870a9;
}

/*Light Color Palette*/
blockquote.light{
  border-left-color: #f5f7fa;
  border-right-color: #e6e9ed;
}

/*Gray Color Palette*/
blockquote.gray{
  border-left-color: #ccd1d8; 
  border-right-color: #aab2bc;
}


/* These CSS classes used just for Demo purpose */
.heading{
   font-family:Montez;
   text-align:center;
   font-size:30px;

}
code{
  color:#da4453;
}
span{
  font-weight:bolder;

}
h1{
  //text-align:left;
  font-size:16px;
  font-family: 'Francois One', sans-serif;

}

span.Cdefault{
  color:#434a53;
}
span.Cgrapefruit{
  color:#da4453;
}
span.Cbittersweet{
  color:#e95546;
}
span.Csunflower{
  color:#f6ba59;
}
span.Cgrass{
  color:#8bc163;
}
span.Cmint{
  color:#34bc9d;
}
span.Caqua{
  color:#3bb0d6;
}
span.Cbluejeans{
  color:#4b8ad6;
}
span.Clavander{
  color:#977bd5;
}
span.Cpinkrose{
  color:#d870a9;
}
span.Clight{
  color:#e6e9ed;
}
span.Cgray{
  color:#aab2bc;
}




@charset "utf-8";



 /*   STYLES ADDED BY BE BELOW   */

blockquote { position: relative; }
blockquote > svg {
  position: absolute;
  top: 0px;
  right: 0px;
  aspect-ratio: 1/1;
  height: 100% !important;

  transform: translateX(calc(100% + .25rem));
}
<blockquote class="lavander">
  Lavander blockquote

  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#fff"><link xmlns="" type="text/css" id="dark-mode" rel="stylesheet" href=""/><style xmlns="" type="text/css" id="dark-mode-custom-style"/><g><rect fill="none" height="24" width="24" y="0"/><path d="M4.19,4.47C3.47,4.79,3,5.51,3,6.3V11c0,5.55,3.84,10.74,9,12c5.16-1.26,9-6.45,9-12V6.3c0-0.79-0.47-1.51-1.19-1.83 l-7-3.11c-0.52-0.23-1.11-0.23-1.62,0L4.19,4.47z M12,7L12,7c0.55,0,1,0.45,1,1v0c0,0.55-0.45,1-1,1h0c-0.55,0-1-0.45-1-1v0 C11,7.45,11.45,7,12,7z M12,11L12,11c0.55,0,1,0.45,1,1v4c0,0.55-0.45,1-1,1h0c-0.55,0-1-0.45-1-1v-4C11,11.45,11.45,11,12,11z"/></g></svg>
</blockquote>


<blockquote class="grapefruit">
  Grapefruit blockquote

  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="100%" viewBox="0 0 24 24" fill="#fff"><link xmlns="" type="text/css" id="dark-mode" rel="stylesheet" href=""/><style xmlns="" type="text/css" id="dark-mode-custom-style"/><g><rect fill="none" height="24" width="24" y="0"/><path d="M4.19,4.47C3.47,4.79,3,5.51,3,6.3V11c0,5.55,3.84,10.74,9,12c5.16-1.26,9-6.45,9-12V6.3c0-0.79-0.47-1.51-1.19-1.83 l-7-3.11c-0.52-0.23-1.11-0.23-1.62,0L4.19,4.47z M12,7L12,7c0.55,0,1,0.45,1,1v0c0,0.55-0.45,1-1,1h0c-0.55,0-1-0.45-1-1v0 C11,7.45,11.45,7,12,7z M12,11L12,11c0.55,0,1,0.45,1,1v4c0,0.55-0.45,1-1,1h0c-0.55,0-1-0.45-1-1v-4C11,11.45,11.45,11,12,11z"/></g></svg>
</blockquote>

请注意，您可以根据需要更改blockquote > svg为blockquote > .my-icon，以便可以使用非 SVG 的图标。后者将作为 HTML 直接添加到块引用中。

推荐阅读