triangle-for-div

如上图，给 div 添加一个尖角样式。原理是用两个 div 叠加在一起形成该效果，一个 div 是普通的方框，另一个 div 则是通过给 4 个边设置一样粗的 border 形成四个三角形拼成的正方型，将其中 3 条边设置为透明，从而形成三角形的尖角。

// 白色小三角
.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent #ffffff transparent;
    margin-left: 10px;
}

Reference