纯css实现等边空心三角形

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

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

---

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

<div class="main"></div>

//大致绘制一个四方形
.main{
  width:80