css实现三角形的最简单方式原理剖析

实现原理分析

一个没有宽高的矩形是可以由四条边组成,那么这四条边的形状就是三角形,把其中三条边的颜色都设置成透明,那么就剩下一个三角形,这就是最终想要的三角形。

效果图:
在这里插入图片描述

实现三角形代码

画一个颜色为pink的三角形:

width: 0;
height: 0;
border-top: 50px solid pink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>画三角形</title>
		<style>
			.box {
				width: 0;
				height: 0;
				border-top: 50px solid pink;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid transparent;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

效果:
在这里插入图片描述

应用场景

  • 类似于微信聊天气泡

猜你喜欢

转载自blog.csdn.net/qq_42961150/article/details/125597521