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>
效果：
应用场景
- 类似于微信聊天气泡