纯css实现等边空心三角形

前段时间写了一些静态页面，用到了空心三角形，手到擒来的是实心三角形，对于空心的三角形，确实用了我这个老年人的脑子想了一想如何布局。给到的设计图如下图所示：

就是左上方的那个小三角，不止这个方位有，别的方位也都有，还有别的页面也有不同朝向的三角形；
话不多说，代码记录下来：

---

首先蓝色border的一整块是一个div

<div class="main">div>

//大致绘制一个四方形
.main{width:80%;height:500px;border:1px solid #0981E6;}
//重点来了
.main:before {
    content: '';
    position: absolute;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 17%;//这个只是确定三角形在哪个位置
    margin-left: -12px;
    top: -10px;
    border-bottom: 10px solid #0082df;
}
.main:after {
    content: '';
    position: absolute;
    top: 11px;
    width: 0;
    height: 0;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    left:17%;//这个只是确定三角形在哪个位置
    margin-left: -11px;
    top: -9px;
    border-bottom: 9px solid #fff;
}

关键的点是：
1.需要有两个三角形，一个是有色的，一个是白色的，两个三角形叠加，形成空心三角形
2.我使用的是元素的伪类before和after；
3.内部的三角形需要比外部的小一圈