原生css画三角

原生css画三角

主要原理就是div盒子的边框是平分对角的。

body{
    margin: 0;
    padding: 0;
}
/*
css画三角
+ 创建一个空的div盒子 <div class="box"></div>
+ 先把高宽设置为0
+ 设置边框的大小(就是你的三角形的大小) 和 实线
+ 设置你需要的三角对应的边的边框为none，比如：我需要一个正三角就把上边框置空
+ 边框颜色：除了你需要的那个边方向的颜色，其他都是透明(transparent)
*/
.box {
    height: 0;
    width: 0;
    border: 20px solid;
    border-top: none;
    border-color: transparent transparent yellow transparent;
}