CSS: 如何实现带边框的三角形。

今天写页面的时候碰到一个需要画三角形的样式，类似于这样：

这个三角形需要带边框。

我们都知道不带边框的三角形，用boder就可是实现了，如果还不知道可以自己调试一下下面的代码。 border画三角形其实就是width、height都设为0，控制border四个边，一个方向带颜色，其他方向为透明

.box {
      width: 0px;
      height: 0px;
      border-top: 50px solid transparent; 
      border-right: 50px solid blue;
      border-bottom: 50px solid transparent;
      border-left: 50px solid transparent;
    }
    
    <div class="box"></div>

如果实现带边框的三角形

三角形已经是用边框实现的了，怎么办在加一次边框呢，一开始并没有思路，就去问了问我的组长，刚问自己就想到了办法。

我们可以用两个三角形，一大一小，小的盖在大的上面不就行了，大三角形露出的部分就成了小三角形的边框。 我们还可以调整三角形的border来控制三角形的角度。

    <div class="arrow"></div>

    .arrow {
            position: absolute; // 绝对定位调整位置
            top: 26px;
            left: 39px;
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-right: 10px solid #E8E8E8;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
          }
          .arrow::after {  // 尽量使用伪元素
            content: '';
            position: absolute;  // 绝对定位调整位置
            left: -7px;
            top: -9px;
            border-top: 9px solid transparent;
            border-right: 9px solid rgb(255, 255, 255);
            border-bottom: 9px solid transparent;
            border-left: 9px solid transparent;
          }

第二种办法

我们组长给的回复是：来一个方形div，让div旋转45度，显出一半，另一半盖住也就实现了带边框的三角形。三角形不能直接加边框，但是div却可以直接加边框。

这种思路也是可以实现的，有兴趣的小伙伴可以去试一下。因为我已经完成了需求所以就没有写代码。