AI智能
改变未来

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;}

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css画各种图形