CSS设计小三角图形

最新推荐文章于 2024-11-08 15:48:55 发布

qq_46074547

最新推荐文章于 2024-11-08 15:48:55 发布

阅读量422

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_46074547/article/details/123925343

版权

在设计中有时会用到如图1所示中的小三角图形：

图1

具体原理如下：

当我们创建一个一个box，并为该box设计四条颜色不同的边框（边框的大小尽量设置大一点，效果比较明显）代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小三角</title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				border: 10px solid;
				border-color: red blue yellow pink;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

此时会发现四条边框相交的的方式如图2所示：

图2

依据此方法，将box的width和height设置为0，此时会产生如图3所示的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图3

图3中的下方的小三角就是我们所需要的图形，先去掉box的border-top（其他方向的小三角则相应的去对应的方向的边框，如：需要向上的小三角则去除上边框，向左的小三角去除左边框），此时左右两边的边框也会各被去掉一半，产生图4的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图4

将border-color属性设置为transparent transparent 需要的三角形的颜色 transparent，此时就完成了，效果如图5：

图5

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小三角</title>
		<style>
			.box{
				width: 0px;
				height: 0px;
				border: 10px solid;
				border-color: transparent transparent yellow transparent;
				border-top: none;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>