css3实现三角形

最新推荐文章于 2024-07-11 20:27:42 发布

原创最新推荐文章于 2024-07-11 20:27:42 发布 · 688 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何使用CSS3创建不同方向的三角形效果，通过设置宽度和高度为0，利用透明边和实色边的border来实现，可以灵活控制三角形的方向和颜色。

第一步：先新建一个div。

<div class="triangle"></div>

第二步：给盒子添加样式。

1.向上

.triangle {
	width: 0;
	height: 0;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	border-bottom: 50px solid red;
}

2.向下

.triangle {
	width: 0;
	height: 0;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	border-top: 50px solid red;
}

3.向左

.triangle {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right: 50px solid red;
}

4.向右

.triangle {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid red;
}

总结：css3三角形，宽高设为：0，三角形方向指向的边不设置，相邻的边border设置但颜色为transparent（透明），相反的边正常设置border属性，border的颜色就是三角形的颜色。