一、圓形

<div style="width: 200px; height: 200px;"><div style="width: 100px; height: 100px; background-color: pink; border-radius: 50%;"></div> </div>

?二、三角形

<div style="width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid red;"></div>

三、畫自適應正方形

<div style="width: 50%; height: 50vw;background: red;"></div>

四、畫直線

使用hr實現 <hr style="height: 5px; background: red; border:0px"/> <div style="width:800px; height:1px; padding:0px; background-color:#D5D5D5; overflow:hidden;"></div> 畫豎線 <div style="height:800px; width:1px; padding:0px; overflow:hidden; border-right: 1px solid blue;"></div>

五、畫扇形

（1）90°的扇形

左上角都是圓角，其余三個角都是直角，

<div style="width: 100px; height: 100px; background-color: red; border-radius: 100px 0 0;"></div>

（2）其他角度的扇形

<div class="shanxing shanxing2"><div class="sx1"></div><div class="sx2"></div></div><style>.shanxing {position: relative;width: 200px;height: 200px;border-radius: 100px;background-color: red;}.shanxing2 .sx1 {transform: rotate(-30deg);background-color: #fff;}.shanxing2 .sx2 {transform: rotate(-150deg); background-color: #fff;}.sx1, .sx2 {position: absolute;width: 200px;height: 200px;transform: rotate(0deg);clip: rect(0 100px 200px 0);border-radius: 100px;background-color: black;}</style>

http://www.360doc.com/content/19/0403/13/63018409_826158109.shtml

總結

以上是生活随笔為你收集整理的CSS画几何图形系列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。