css3实现三角形

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了

.arrow{
	width:100px;
    height:100px;
	border:90px solid #000;
	border-left-color:orange;
}

<body>
<div class="arrow"></div>
</body>

在这里插入图片描述
当宽高为0的时候就是一个三角形

.arrow{
    width:0;
	height:0;
	border:90px solid #000;
	border-left-color:orange;
}

在这里插入图片描述
让其他边框透明

.arrow{
    width:0;
	height:0;
	border:90px solid transparent;
	border-left-color:orange;
}

在这里插入图片描述

相信你其他方向的三角形也能制作出来了，实际开发的时候，经常使用伪类来实现。

div{
	position:relative;
}
.arrow:after{
	width:0;
	height:0;
	border: 100px solid transparent;
	border-left-color: orange;
	position:absolute;
	content:'';
}

两个伪类的实现

 div {
	position: relative; 
}
.arrow:after,.arrow:before {
	width: 0;
	height: 0;
	border: 100px solid transparent;
	border-left-color: orange;
	position: absolute;
	content: "";
}
.arrow:before{
	top: 0;
	left: 46px;//根据实际情况调整
	border-left-color: white;
}

在这里插入图片描述

附录
另外一篇三角形绘制的博客 https://blog.csdn.net/weixin_30412013/article/details/101276574?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1

黄宝康

发布了1230 篇原创文章 · 获赞 310 · 访问量 223万+

他的留言板关注

猜你喜欢