css border 三角形

 

当元素的宽高都为0时,只写border,就会发现形成的正方形有4个三角形组成.

.triangle {
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-color: #e66161 #f3bb5b #94e24f #85bfda;
}

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

效果:

 

 

 

那么实现下图的各种 8个更小的组成部分也是可以的.

 

nw: 东北方向

.top-right {
    border-top: 20px solid #94e24f;
    border-right: 20px solid transparent;
    border-bottom: 0;
    border-left: 0;
}

<div class="triangle top-right"></div>

效果:

 

其余的类推即可