css画各种图形

1.三角形

.triangle{width:0;height:0;border:50px solid transparent;border-left:50px solid red;// border-bottom:50px solid red;}.triangle{width:0;height:0;border-right:100px solid transparent;border-bottom:100px solid red;}

2.扇形

.div{position: relative;width:200px;height:200px;border-radius:100px;background-color: #000;}.div1{position: absolute;width:200px;height:200px;border-radius:100px;transform: rotate(-30deg); // -逆时针旋转,+顺时针旋转clip: rect(0px,100px,200px,0px); //上：切割掉上部的长度 右：从左到右的长度  下：自上而下的长度  左：切割掉左部分的长度background-color: #f00;}.div2{position: absolute;width:200px;height:200px;border-radius:100px;transform: rotate(-150deg);clip: rect(0px,100px,200px,0px);background-color: #f00;}