說到CSS技術(shù)，有一本《CSS的秘密》在一個真正的夢幻般的書，書中講的CSS的技巧和技術(shù)解決日常問題。如果認(rèn)為自己CSS的相當(dāng)好，再想想：你會驚訝。在這篇文章中，我們將會用CSS設(shè)計簡單餅圖。注意，由于瀏覽器的兼容，部分瀏覽器可能無法達(dá)到想要的效果。
餅圖，即使在最簡單的雙色形式，歷來不是簡單的Web技術(shù)創(chuàng)建，盡管是非常常見的范圍從簡單的數(shù)據(jù)進(jìn)步指標(biāo)和定時器信息。實現(xiàn)通常涉及使用外部圖像編輯器來創(chuàng)建多值的多個圖像這個餅圖，或大型的JavaScript框架設(shè)計更復(fù)雜的圖表。
雖然以前那樣做可能不可能，但是他就沒有更簡單的做法了吧。但是，有許多更好的，今天就用更簡單的方式來實現(xiàn)它。
首先簡單的頁面布局
這個簡單的方式選擇就開始吧：標(biāo)記只需一個，其余的是做偽元素，變換和CSS漸變。div標(biāo)記：
像一般的餅圖，顯示默認(rèn)的百分比20%。我們將努力使它靈活的后。讓我們先風(fēng)格的元素是一個圓，這將是我們的背景（圖1）：
.pie{
width:100px;height:100px;
border-radius:50%;【圓角】
background:yellowgreen;
}
我們的餅圖是綠色的（特別是黃綠色棕色# 655）顯示百分比。我們可能會使用百分比部分斜變換，但作為一個小實驗，他們被證明是一個非?；靵y的解決方案。相反，我們將在我們的左、右圓部分的顏色兩種顏色，和使用需要設(shè)置旋轉(zhuǎn)屬性的偽元素用百分比表示。
圓褐色是我們圖案中的一種顏色，我們將使用一個簡單的線性漸變來做：
background-image:linear-gradient(to?tight,transparent?50%,#655?0);
上圖所示，這就是所需的全部內(nèi)容。現(xiàn)在，我們可以著手設(shè)計充當(dāng)掩飾的偽元素，將作為一個掩飾：
.pie::before{
content:"";
display:block;
margin-left:50%;
height:100%;
}
在上圖中可以看到，我們目前是偽元素相對于派元。目前，它不包括任何東西。這只是一個看不見的矩形。開始的造型，可以一起思考：
因為我們想要它包括我們?nèi)Φ淖厣糠郑覀冃枰粋€綠色的背景吧，用的背景色： 為避免重復(fù)，我們希望它有相同的背景色為其母。
我們希望它繞圓圈的中心，這是對偽元素的左側(cè)中間，所以我們應(yīng)該把transform-origin屬性設(shè)置為0 50% 在左側(cè)。
我們不希望它是一個矩形，它讓它是過的餅圖的邊緣，所以我們需要設(shè)置 這個 .pie的 overflow: hidden 同時給一個合適的border-radius值 使他成為半圓 。
總而言之，我們的偽元素的CSS將看起來像這樣：
.pie::before{content:'';display:block;margin-left:50%;height:100%;border-radius:0100%100%0/50%;background-color:inherit;transform-origin:left;}
注意：不要使用background: inherit;相反的，background-color: inherit; 會被繼承了！
目前我們的餅圖如上圖所示。這是個有趣的開始！我們可以開始旋轉(zhuǎn)的偽元素，通過應(yīng)用rotate（）
變換。對于20%我們試圖實現(xiàn)的，我們可以用一個價值72deg(0.2 × 360 = 72), or2turn。，這是更好的可讀性。你可以看到它如何尋找一些其他的值，如圖5。
我們簡單的餅圖顯示不同比例；從上到下：10%、20%、40%
我們可能會認(rèn)為我們做的，但不幸的是，它不是那么簡單。我們的餅圖適合顯示從0到50%的比例，但如果我們試圖描述一個60%旋轉(zhuǎn)（通過應(yīng)用6turn。如下），發(fā)生。不要失去希望，雖然，可以和我們一起解決這個問題！
今天的分享就到這里吧，大家學(xué)習(xí)有難度嗎？ 想學(xué)習(xí)更多 或者有點難度 可以加入我們的學(xué)習(xí)群 497187010 一起交流學(xué)習(xí) 哦！完美的 做法 我們下一篇繼續(xù)講，大家可以先嘗試做做一下吧。同時也可以用svg 等 來做 ，嘗試一下吧！
?
