放一个div
.div1 {
width: 0;
height: 0;
border-bottom: 125px solid red;
border-top: 125px solid rebeccapurple;
border-left: 125px solid gainsboro;
border-right: 125px solid gold;
}
这样会得到一个四份颜色不一样的三角形,所以要得到一个,把其他三个隐藏就可以了
transparent 透明
.div1 {
width: 0;
height: 0
border: 125px solid transparent;
border-bottom-color: aqua;
}
使用clip-path
div {
height: 150px;
width: 150px;
background-color: crimson;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}