记录一下今天看uni-app学到的小知识，用css边框画各种三角形。
先上效果图：
效果图
html 如下：
<div class="div-btn">您好，我这里有个黑科技你要不要看一下.我这里有个黑科技你要不要看一下.</div>
css 如下：
.div-btn{
position: relative;
background-color: #f4f4f4;
margin: 20px;
padding: 10px 20px;
border-radius: 10px;
}
.div-btn:after{
position: absolute;
left: -20px;
right: 0;
top: 10px;
content: ‘’;
width: 0;
height: 0;
border: 10px solid #f4f4f4;
border-color: transparent #f4f4f4 transparent transparent;
}
原理讲解：
改动后示意图
- 根据改动后效果图，方便分析出三角形的由来，在正方形的基础上，假设放大宽高修改为0px，可以想象正方形变成实心正方形了.
- 然后修改边框颜色为透明仅余右边框后，就可以得到一个顶端向左的三角形了。同理各个方向的三角形都可以得到了，
