css设置利用伪元素设置三角形

首先我们先建个盒子，里面放几句话，方便展示

 <div>
        <h2>少年行</h2>
        <span>杜甫</span>
        <ul>
            <li>新丰美酒斗十千，</li>
            <li>咸阳游侠多少年。</li>
            <li>相逢意气为君饮，</li>
            <li>系马高楼垂柳边。</li>
         
        </ul>
    </div>

现在的样式是

 然后我们需要在每一句诗的前面加上这样的三角形

 接下来就是利用伪元素来制作三角形

 //":before" 伪元素可以在元素的内容之后插入新内容。
 ul>li::before{
        content: "";            
        height: 0;
        width: 0;
        //宽高都设为0
        border: 5px solid transparent;
        //设置边框的的大小，类型，以及全部透明
        border-left: 5px solid red;
        //将你想要的那边三角形的颜色设为非透明色或非白色就可以显示了
    }

现在的结果是这样的

 他缺了一角，原因是因为伪元素他没有宽高，所以显示不出来，要将他转化为行内块元素才可以显示完整的三角形

display: inline-block;  //转为行内块元素

最后的结果展示：