您的位置：首页 > Web前端 > CSS

用css写一个三角形

2016-05-07 17:25 411 查看
今天闲着没事，想写个三角形看看

用到的border 和 trasparent(透明)
<body>
<div></div>
</body>

css代码
div{
float:left;
background-color: #00ced1;
border-top: 100px solid  #fafad2;
border-left: 100px solid #cd5c5c;
border-right: 100px solid #00bfff;
border-bottom: 100px solid #ffa07a;
}


出现的效果是这样的





我们可以看到当所有的边都设置之后，有四个方向的等腰三角形
我们只需要一个方向的就够了，把把其他边设置透明就行
div{
float:left;
border-top: 100px solid  transparent;
border-left: 100px solid #cd5c5c;
border-right: 100px solid  transparent;
border-bottom: 100px solid  transparent;}


产生的效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航