CSS画三角形的简单做法

记录一下今天看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; 
        }

---

原理讲解：

改动后示意图

1. 根据改动后效果图，方便分析出三角形的由来，在正方形的基础上，假设放大宽高修改为0px，可以想象正方形变成实心正方形了.
2. 然后修改边框颜色为透明仅余右边框后，就可以得到一个顶端向左的三角形了。同理各个方向的三角形都可以得到了，

这样做不单单是三角形，等边梯形不同方向的也可以实现。