使用CSS创建形状 [英] Creating shapes with CSS
本文介绍了使用CSS创建形状的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的网站中,我想做一个演讲泡沫,并找到了一个很好的教程。但是我想做一些更改,但是我不知道该怎么做。
基本上我想水平翻转小三角形,因此其垂直方向在右侧而不是左侧。
这是CSS:
At my website i want to make a speech bubble and found a great tutorial for doing so. But i want to do some changes, but i dont know how to. Basicly i want to flip the little triangle horizontally, so its vertical on the right side instead of the left. Here is the 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;
}
推荐答案
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>
这篇关于使用CSS创建形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文