使用border实现三角形

 <div class="d"></div>
<style>
.d::after {
      content: "";
      border-style: solid;
      border-width: 40px 40px 0 40px;
      display: inline-block;
      border-color: black transparent transparent transparent
    }
</style>

　　实现原理 顺序都是上右下左。

　　将指定方向边宽度为0，对角边设置颜色即可实现上下指定转向。

 

　　在移动端设置图纸上的指定大小，然后通过 transform: scale(0.5)实现缩小，这个和移动端1像素实现原理相同