在我的website我想制作一个讲话泡泡,并找到了一个很棒的教程。但我想做一些改变,但我不知道该怎么做。 基本上我想水平翻转小三角形,所以它的右侧垂直而不是左侧。 这是CSS:
.bubble
{
margin-top: 100px;
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
.bubble:after
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
top: 100px;
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
答案 0 :(得分:3)
尝试下面的css:
.bubble:after {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: orange orange transparent transparent; // See here i change the color
border-style: solid;
border-width: 15px;
content: " ";
height: 0;
position: absolute;
right: 38px; // see here for position
top: 100px;
width: 0;
}
.bubble:before {
border: 25px solid;
content: " ";
height: 0;
position: absolute;
right: 30px; // see here for position
top: 100px;
width: 0;
}
答案 1 :(得分:2)
Here是一个表明它有效的jsFiddle。参考Pure CSS Bubbles
CSS
.bubble {
margin-top: 100px;
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: orange;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
.bubble:after {
content:"";
position:absolute;
bottom:-20px;
left:50px;
border-width:20px 0 0 20px;
border-style:solid;
border-color: orange transparent;
display:block;
width:0;
}
HTML
<div class="bubble">
nice
</div>
答案 2 :(得分:0)
现在我通过翻转元素来修复它。还有另一种方法是正确的方法吗?
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);