css 生成三角形

Posted 2020-07-26 清风叶

1，生成有填充颜色的三角形

some-class {

　　width: 0;

　　height: 0;

　　border-left: 20px solid transparent;

　　border-right: 20px solid transparent;

　　border-bottom: 40px solid red;

}

或者

some-class {

　　width: 0;

　　height: 0;

　　border-width: 20px;

　　border-style: solid;

　　border-color: transparent transparent red transparent;

}

2，生成没有颜色填充的三角形

some-class {

　　display: block;

　　width: 5px;

　　height: 5px;

　　border-color: transparent transparent #fff #fff;

　　border-style: solid;

　　border-width: 2px;

　　transform: rotate(-45deg);

}