[css] CSS画一个三角形，CSS绘制空心三角形

1.不同理解的边框

<div class="border"></div>

.border {width: 50px;height: 50px;border: 2px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

将border设置大一点

.border {width: 50px;height: 50px;border: 50px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

当border足够宽，这才反应过来border就像我们在生活中见过的相框，它是由四个梯形拼凑而成。中间白色区域就是元素的宽高，
现在我们将元素宽高去除掉：

.border {width: 0;height: 0;border: 50px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

那么现在你想要什么颜色的三角形呢？比如我要中国红，那就将上，左右边框颜色设置为透明，这样就得到了一个红色三角形
将上，左右边框颜色设置为透明

.border {width: 0;height: 0;border: 50px solid;border-color: transparent transparent #d9534f;
}

当然这样还不够完美，我们可以看到虽然上方没颜色，还是占据了部分高度，对于强迫症来说真的不舒服，我们再将上边框高度去除掉。

将上边框高度去除掉。

.border {width: 0;height: 0;border-bottom: 50px solid #d9534f;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 0;
}

这样就是一个比较完美的三角形了：

2.CSS画一个空心三角形（只有边框)

那么现在我们想画一个只有边框的空心三角形怎么做呢，首先三角形本身就是由border实现，所以没法在border上添加border了，最直接的办法就是再新建一个小一点的三角形定位上去。

这里我使用伪类再定义一个小一点三角形，可以看到是这样：

.border {width: 0;height: 0;border-style:solid;border-width: 0 50px 50px;border-color: transparent transparent #d9534f;position: relative;
}
.border:after{content: '';border-style:solid;border-width: 0 40px 40px;border-color: transparent transparent #96ceb4;position: absolute;top: 0;left: 0;
}

可以看到小三角顶端与大三角形对齐，且小三角形左侧恰好与大三角形中心部分对齐。这是因为伪类元素定位参照对象的内容区域没有任何东西，在我们没隐藏其它三个三角形之前，四个三角形的中心就是父级元素。

那么进行简单定位微调，可以看到效果变成这样：

.border:after {content: '';border-style: solid;border-width: 0 40px 40px;border-color: transparent transparent #96ceb4;position: absolute;top: 6px;left: -40px;
}

最后我们将小三角形的边框颜色换成白色，那么一个只有边框的空心三角形就诞生了：

.border:after {content: '';border-style: solid;border-width: 0 40px 40px;border-color: transparent transparent #fff;position: absolute;top: 6px;left: -40px;
}

3.实现一个箭头

实现一个箭头就更好说了，我们将定位的三角形设置的与之前的三角形一样大，简单定位，比如这样：

        .border:after {content: '';border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent green;position: absolute;top: 6px;left: -50px;}

再将背景色改成白色即可：

        .border:after {content: '';border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #fff;position: absolute;top: 6px;left: -50px;}

.border {width: 0;height: 0;border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #d9534f;position: relative;
}.border:after {content: '';border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #fff;position: absolute;top: 6px;left: -50px;
}.border:hover{border-top: 50px solid rgb(126, 212, 177);border-bottom: 0;
}.border:hover::after{border-top: 50px solid #fff;border-bottom: 0;margin-top: -62px;
}

分析：

把白色换成蓝色看看

.border:hover{border-top: 50px solid rgb(126, 212, 177);border-bottom: 0;
}.border:hover::after{border-top: 50px solid rgb(125, 145, 211);border-bottom: 0;margin-top: -62px;
}

把margin去掉看看

 .border:hover{border-top: 50px solid rgb(126, 212, 177);border-bottom: 0;}.border:hover::after{border-top: 50px solid rgb(125, 145, 211);border-bottom: 0;}

当然也可以用::before和::after一起写

 .border {width: 0;height: 0;position: relative; }.border::before{content: '';border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 0;border-bottom: 50px solid #d9534f;position: absolute;top: 0;left: 0;}.border:after {content: '';border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 0;border-bottom: 50px solid #7dc71b;position: absolute;top: 6px;left: 0px;}

换成白色

.border:hover:before{border-top: 50px solid rgb(126, 212, 177);border-bottom: 0;
}
.border:hover::after{border-top: 50px solid rgb(17, 66, 228);border-bottom: 0;margin-top: -12px;
}

换成白色

        .border {width: 0;height: 0;position: relative; margin:30px auto;}.border::before{content: '';border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 0;border-bottom: 50px solid #d9534f;position: absolute;top: 0;left: 0;}.border:after {content: '';border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 0;border-bottom: 50px solid #7dc71b;position: absolute;top: 6px;left: 0px;}.border:hover:before{border-top: 50px solid rgb(126, 212, 177);border-bottom: 0;}.border:hover::after{border-top: 50px solid #fff;border-bottom: 0;margin-top: -12px;}

总结：

用::after写

.border {width: 0;height: 0;border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #d9534f;position: relative;
}.border:after {content: '';border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #fff;position: absolute;top: 6px;left: -50px;
}.border:hover{border-top: 50px solid rgb(126, 212, 177);border-bottom: 0;
}.border:hover::after{border-top: 50px solid #fff;border-bottom: 0;margin-top: -62px;
}

用::before ::after写

        .border {width: 0;height: 0;position: relative; margin:30px auto;}.border::before{content: '';border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 0;border-bottom: 50px solid #d9534f;position: absolute;top: 0;left: 0;}.border:after {content: '';border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 0;border-bottom: 50px solid #7dc71b;position: absolute;top: 6px;left: 0px;}.border:hover:before{border-top: 50px solid rgb(126, 212, 177);border-bottom: 0;}.border:hover::after{border-top: 50px solid #fff;border-bottom: 0;margin-top: -12px;}

参考：
CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头