在使用bootstarp时,有很多图形,想问一下如何使用CSS绘制三角形?
回答
云松回答
问题分析:
css绘制三角形主要使用边框来控制,当我们把元素的宽度和高度都设定为0,只设定边框时,可以出现不同的图像。
以上图形都可以通过边框设定来实现。而你说的京东的那个下三角的图像,我们只需要在把最后一个图形通过css设定一个图形遮盖掉中间的部分就可以实现。
问题解答:
<style type="text/css">
.ico{
width: 0px;
height: 20px;
border:20px solid transparent;
border-top: 20px solid #ccc;
position: relative;
}
.ico:before{
content: "";
display: block;
width: 0px;
height: 0px;
border: 18px solid transparent;
border-top:18px solid #fff;
position: absolute;
left: -18px;
top: -22px;
}
</style>
<div class="ico"></div>
(0)
相似问题