HTML:
<blockquote class="rectangle-speech-border">
<p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>
CSS:
.rectangle-speech-border {
position:relative;
padding:50px 15px;
margin:1em 0 3em;
border:10px solid #5a8f00;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:before {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:50px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:80px 50px;
-moz-border-radius-bottomright:80px 50px;
border-bottom-right-radius:80px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates smaller curve */
.rectangle-speech-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:20px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:40px 50px;
-moz-border-radius-bottomright:40px 50px;
border-bottom-right-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
content:"";
position:absolute;
bottom:-40px;
left:45px;
width:10px;
height:10px;
background:#5a8f00;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
content:"";
position:absolute;
bottom:-10px;
left:76px;
width:24px;
height:15px;
background:#fff;
}
示例取自:Nicolas Gallagher
这个文本气泡基本上向左和底部左侧弯曲。我想完全复制它,只是把它放在右下方并向右弯曲。只需翻转即可。
我尝试将权利改成左侧,但没有发生任何事情。有人可以告诉我需要更改什么来翻转这个气泡吗?