CSS创造三角形的原理

时间:2022-11-27 10:53:50

其实就是利用了div各方向border的接驳点产生的斜线的特点,知道原理后就不觉得有多不可思议了。。

CSS创造三角形的原理

CSS创造三角形的原理

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

CSS创造三角形的原理

.triangle_up {
height: 0px;
width: 0px;
border-bottom: 50px solid #006633;/*深绿*/
border-left: 50px solid #a06633;/*棕色*/
border-right: 50px solid #00d633;/*浅绿*/
border-top: 50px solid #0066e3;/*蓝色*/
}