三角图标绘制

先设计一段html代码，以此来做示例：

<article>
    <h1>Lorem ipsum</h1>
     <p>Ne maluisset sententiae qui, mucius epicuri reprimique et cum, sumo saperet laboramus et pri.
             An ignota incorrupte quo, ex his dicta nominavi, erat consulatu eum cu. Eum ea illum assum dictas, 
             tincidunt reprimique est eu.</p>
</article>

            body{
                background: #d4676a;
                margin: 50px;
                font-family: sans-serif;
            }
            article{
                background: #ffffff;
                border-radius: 4px;
                padding: 20px 40px;
                width: 400px;
                box-shadow: 5px 7px 1px rgba(0, 0, 0, 0.1);
                position: relative;
            }
            article h1{
                color: #d4676a;
            }
            article p{
                color: #666666;
            }

---

接着绘制三角形。在绘制之前，先做一个实验，当元素的宽度和高度都为0的情况下，为元素设置边框样式。

       article::after{
           content: '';
           position: absolute;
           bottom: -40px;
           width: 0px;
           height: 0px;
           border-width: 20px;
           border-style: solid;
           border-color: #390 #f30 #36f #ff3;
       }

在这里，设置after的内容的高度和宽度都为0，再设置边框的宽度为20px，边框的颜色上下左右设置不同颜色。测试页面我们发现呈现为四个颜色不同的三角形。这是因为内容的宽度和高度都为0的时候，边框将外面四个角向内衍生到中心点处，结果边框被分成了4个三角形。

设置左、右、下三个三角形为透明的，并改变上三角的颜色：

      article::after{
          border-color: #ffffff transparent transparent;
      }

---

设置三角符号在左边，只需要把右边的三角改为白色，再设置left为-40px（因为相对于article来说，把右边三角形的边紧靠到article边框上，需要向左移动40px，因为边框宽度就是40px，下面有图），设置top为一定像素：

       article::after{
           left: -40px;
           top: 40px;
           border-color:transparent #b43939 transparent transparent;
       }

然后，向上和向右的就类似于这样，就不再记录。

---

还可以造成三角形缺口效果：设置左边三角形为背景颜色，然后距离左边0像素就刚好实现了。

     article::after{
         left: 0;
         border-color:transparent transparent transparent #d4676a;
     }

---

还可以给文章加上点缀一下：修改代码，移动右三角形的位置，使他距离右边侧30px的地方。然后再添加一个 article::before，代码和 article::after 一样，只是距离右边侧的位置不一样：

       article::after{
           right: 30px;
           border-color:transparent transparent transparent #d4676a;
       }  
       article::before{
          right: 20px;
          border-color:transparent transparent transparent #d4676a;
      }