用css3画有边框的三角形

思路：两个三角形叠加，暂且把有边框的三角形定义为A，大三角形定义为B，小三角形定义为C，B的背景颜色==A的边框颜色，B的背景颜色=A的背景颜色。可以利用伪元素，也可以利用绝对定位的方式。

<div class="box">
      <div class="triangle"></div>
</div>

css样式：

*{
    padding:0;
    margin:0;
}
html{
    font-size: 62.5%;
}
.box{
    height:10rem;
    width:15rem;
    border-radius:0.5rem;
    border:1px solid lightblue;
    margin:1.5rem auto;
    position:relative;
}
/*小的三角形，用的是给大box加伪元素*/
.triangle{
    position:absolute;
    width:0;
    height:0;
    border-top:0.5rem solid transparent;
    border-right:0.5rem solid #fff;
    border-bottom: 0.5rem solid transparent;
    top:1.5rem;
    left:-0.5rem;
}

/*大的三角形，用的是绝对定位*/
.box:before{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-top:0.6rem solid transparent;
    border-right:0.6rem solid lightblue;
    border-bottom: 0.6rem solid transparent;
    top:1.4rem;
    left:-0.6rem;
}

效果图：

定位方式可以根据自己喜欢修改，可以都是绝对定位也可以都是使用伪元素