css实现三角形

今天学到的两种方式可以实现三角形，简单写一下

方法一：

html代码：<span>我是三角形</span>

css代码如下：用伪元素实现一下

span:before{

          content: "";

         display: block;

         width:20px;

        border-top:10px solid transparent;

        border-bottom:10px solid transparent;

        border-right:10px solid red;

}

这个方式感觉不是特别好，因为实现的是左右两个三角。

方法二：html代码  <div class="box"></div>

css代码如下：

.box{

width:0px;

border-left:30px solid red;

border-top: 30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid transparent;

}

这个方式个人觉得还是比较实用的，想要实现哪个角，直接给那个角添加颜色（transparent：透明度）