css实现有边框的三角形

1、html

    <!--向上的三角形-->
    <div class="border-up">
      <span></span>
    </div>
    <!--向下的三角形-->
    <div class="border-down">
      <span></span>
    </div>
    <!--向左的三角形-->
    <div class="border-left">
      <span></span>
    </div>
    <!--向右的三角形-->
    <div class="border-right">
      <span></span>
    </div>

2、css

.border-up {
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid #333;
        position: relative;
        margin: 50px auto;
      }
      .border-up span {
        display: block;
        width: 0;
        height: 0;
        border-left: 28px solid transparent;
        border-right: 28px solid transparent;
        border-bottom: 28px solid palevioletred;
        position: absolute;
        left: -28px;
        top: 1px;
      }
      .border-down {
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid #333;
        position: relative;
        margin: 50px auto;
      }
      .border-down span {
        display: block;
        width: 0;
        height: 0;
        border-left: 28px solid transparent;
        border-right: 28px solid transparent;
        border-top: 28px solid palevioletred;
        position: absolute;
        left: -28px;
        top: -29px;
      }
      .border-left {
        width: 0;
        height: 0;
        border-bottom: 30px solid transparent;
        border-right: 30px solid #333;
        border-top: 30px solid transparent;
        position: relative;
        margin: 50px auto;
      }
      .border-left span {
        display: block;
        width: 0;
        height: 0;
        border-bottom: 28px solid transparent;
        border-right: 28px solid palevioletred;
        border-top: 28px solid transparent;
        position: absolute;
        left: 1px;
        top: -28px;
      }
      .border-right {
        width: 0;
        height: 0;
        border-left: 30px solid #333;
        border-bottom: 30px solid transparent;
        border-top: 30px solid transparent;
        position: relative;
        margin: 50px auto;
      }
      .border-right span {
        display: block;
        width: 0;
        height: 0;
        border-left: 28px solid palevioletred;
        border-bottom: 28px solid transparent;
        border-top: 28px solid transparent;
        position: absolute;
        left: -29px;
        top: -28px;
      }

 3、效果图

来源：https://www.cnblogs.com/camille666/archive/2012/07/18/css_triangle_border.html