[css] 用CSS畫出一個(gè)任意角度的扇形，可以寫多種實(shí)現(xiàn)的方法

先畫一個(gè)圓,外加兩個(gè)絕對(duì)定位的半圓 扇形可以通過兩個(gè)半圓作為遮罩旋轉(zhuǎn)來露出相應(yīng)的角度實(shí)現(xiàn) 這只能切出180°以內(nèi)的扇形 超過180°的扇形,就把圓作為底色,兩個(gè)遮罩作為扇形的組成部分不知道描述的好不好理解,但確實(shí)能實(shí)現(xiàn)任意角度的扇形了.contain {position: relative;width: 200px;height: 200px;}.main {height: 100%;background: lightgreen;border-radius: 100px;}.common {position: absolute;top: 0;width: 50%;height: 100%;}.mask1 {transform: rotate(83deg);border-radius: 100px 0 0 100px;left: 0;transform-origin: right center;background: red;}.mask2 {transform: rotate(-76deg);transform-origin: left center;left: 100px;border-radius: 0 100px 100px 0;background: blue;}HTML代碼<div class="contain"><div class="main"></div><div class="mask1 common"></div><div class="mask2 common"></div></div>

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。