概述
(1)实心三角形
html
<div class='sanjiao'></div>
css
.sanjiao{
border-left: 10px solid transparent;
border-bottom: 10px solid red;//向上的三角
border-right: 10px solid transparent;
border-top: 10px solid transparent;
width: 0px;
height: 0px;
}
(2)空心三角形
这里画了一个正方形,不设置背景色,设置左边和上边相邻两边的border,再画两个三角形,边长为第一个三角形的对角线长度,通过旋转驾到第一个三角形的斜边上,通过两个矩形组合成一个空心的三角形
.sanjiao{
width: 100px;
height: 100px;
border-left: 1px solid red;
border-top: 1px solid red;
position: relative;
}
.sanjiao:after{
content: "";
position: absolute;
left: 29px;
top: 29px;
width: 141.4px;
height: 141.4px;
border-left: 1px solid red;
transform: rotate(45deg);//通过旋转来改变三角形的朝向
}
最后
以上就是健康芝麻为你收集整理的用CSS画实心三角形和空心三角形的全部内容,希望文章能够帮你解决用CSS画实心三角形和空心三角形所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复