实现原理分析
一个没有宽高的矩形是可以由四条边组成,那么这四条边的形状就是三角形,把其中三条边的颜色都设置成透明,那么就剩下一个三角形,这就是最终想要的三角形。
效果图:
实现三角形代码
画一个颜色为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>
效果:
应用场景
- 类似于微信聊天气泡