css 修改三角形大小_CSS三角形形状及大小的设置

画出来是由四个三角形组成的四边形

四个三角形相交的点到各边的垂线就是border设置的宽度

想要什么样的三角形就看数学了

#test{

position: relative;

}

#triangle1 {

position: absolute;

top: 0;

left:0px;

width: 0;

height: 0;

border-left: 5px solid #03A6EA;

border-right: 5px solid #03A6EA;

border-top: 20px solid red;

border-bottom: 20px solid yellow;

}

#triangle2 {

position: absolute;

top: 0;

left:10px;

width: 0;

height: 0;

border-left: 20px solid #03A6EA;

border-right: 20px solid #03A6EA;

border-top: 20px solid red;

border-bottom: 20px solid yellow;

}