css3实现三角形

最新推荐文章于 2021-09-20 11:58:17 发布

黄宝康

最新推荐文章于 2021-09-20 11:58:17 发布

阅读量331

点赞数

分类专栏： css 文章标签： css3实现三角形

本文链接：https://blog.csdn.net/huangbaokang/article/details/105429802

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为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

黄宝康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3实现三角形

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了.arrow{ width:100px; height:100px; border:90px solid #000; border-left-color:orange;}<body><div class="arrow">&lt...
复制链接

扫一扫