CSS3中的扇形圖是一種非常有用且好看的數據可視化方式,能夠有效地將數據以圖表的形式展現出來。扇形圖中的每個扇形就代表一個數據項,而每個扇形的大小表示該項所占的比例。
下面是一個使用CSS3實現扇形圖的樣例代碼:
.circle { width: 150px; height: 150px; position: relative; } .circle:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 75px 75px 0 0; border-color: #f00 transparent transparent transparent; position: absolute; top: 0; left: 0; transform-origin: 100% 100%; } /* 50%扇形 */ .half-circle { clip: rect(0, 75px, 150px, 0); } .half-circle:before { transform: rotate(180deg); } /* 25%扇形 */ .quarter-circle { clip: rect(0, 75px, 75px, 0); } .quarter-circle:before { transform: rotate(135deg); } /* 75%扇形 */ .three-quarter-circle { clip: rect(0, 150px, 75px, 75px); } .three-quarter-circle:before { transform: rotate(-45deg); }
在這個樣例代碼中,使用了:before偽元素來繪制扇形圖。我們可以通過設置偽元素的border樣式和transform屬性來控制扇形的大小和角度。
使用這個樣例代碼可以繪制出50%、25%和75%三個不同的扇形圖,我們可以根據需要來調整樣式來實現其他比例的扇形圖。