介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> & lt;/title>
& lt;风格类型=拔谋?css"比;/* css3绘制三角形*/.triangle {
宽度:0 px;/*设置宽高为0,所以div的内容为空,从才能形成三角形尖角*/高度:0 px;
边界底部:200 px固体# 00 a3af;
border-left: 200 px固体透明;/*透明表示透明*/边境:200 px固体透明;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=皌riangle"祝辞& lt;/div>
& lt;/body>
& lt;/html> .triangle {
宽度:50 px;
高度:50 px;
border-top: 200 px固体# 00 a497;
边界底部:200 px固体# cc7eb1;
border-left: 200 px固体# 165 e83;
边境:200 px固体# c85179;
} .triangle {
宽度:0 px;
高度:0 px;
border-top: 200 px固体# 00 a497;
边界底部:200 px固体# cc7eb1;
border-left: 200 px固体# 165 e83;
边境:200 px固体# c85179;
} .triangle {
宽度:0 px;
高度:0 px;
边界底部:200 px固体# cc7eb1;
border-left: 200 px固体# 165 e83;
边境:200 px固体# c85179;
} .triangle {
宽度:0 px;
高度:0 px;
边界底部:200 px固体# cc7eb1;
border-left: 200 px固体透明;
边境:200 px固体透明;
}
小编给大家分享一下利用css画出一个三角形的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
首先我们来看一下效果图:
实现代码:
还是不理解的小伙伴可以看下面
1,设置div有一定宽高,四边设置边框
上面代码设置div有一定宽高,四边设置边框时,效果如下:
2,设置div宽高为0,四边设置边框宽度为200 px
上面代码设置div宽高为0,四边边框设置不同颜色时,效果如下:
3,接下来div宽高仍为0,去掉border-top
上面代码设置div宽高为0,只设置下边框和左右边框时,效果如下:
4,最后发现,只将边界底部设置颜色,左右边框透明,既可得到三角形
最终效果:
看完了这篇文章,相信你对利用css画出一个三角形的方法有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
