CSS -添加图标右blockquote边界

Question

我没有任何开发记录，我想得到我的家wiki不同的blockquote样式。我发现了这种blockquotes风格，它们对我来说很棒。我只想添加右边框图标。我该怎么做呢?(谷歌材料字体图标会很棒)https://i.ibb.co/SrtgChF/Capture.png

感谢css文件:https://textdoc.co/jvP3XhZCcJ80rxTq

Answer 1

因为你的blockquote的彩色部分是你的blockquote本身的一部分-即没有不同的元素-你将不得不在blockquote中直接添加svg或图标。然后通过你的css样式，你可以把它定位到你想要的位置。

在这里，我将图标的position设置为absolute，因此我可以将其移动到blockquote的右侧。我还使用了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直接添加到blockquote中。