前端讀者 | CSS三角形和餅圖

@羯瑞

三角形

.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}
.triangle_top{width:0;height: 0;border-width:50px;border-style:solid;border-color:red transparent transparent transparent;}
.triangle_right{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent blue transparent transparent;}
.triangle_bottom{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent transparent green transparent;}
.triangle_left{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent transparent transparent yellow;}

要點

1. 注意各個方向邊框值的邊框，能夠寫出不一樣的等邊三角形，等腰三角形，任意三角形...
2. transparent 透明色，這個得必須，也能夠設置成跟底色同樣的顏色就能夠。
3. 把四個邊設置不一樣數值，你會發現CSS三角形的規律的

拓展扇形

border-radius: 50px

餅圖

思路

1. 先建一個圓，而後分左右兩塊。
2. 左右兩塊裏面在包含一個半圓，而後對其作旋轉處理，來匹配對應的百分比，溢出隱藏處理

注意

1. 由於是左右兩塊，因此要注意溢出隱藏，以達到最終效果
2. 注意旋轉的中心點
3. 若是中心區域掏空的話，注意層級問題
4. 若是百分比<=50%，能夠不要右邊那塊
5. 百分比跟旋轉角度的對應換算（百分比/100*360）

例子

<style>
.pie38{width: 100px;height: 100px;border-radius: 50px;margin:20px;background-color: #ddd;position: relative;display: inline-block;overflow: hidden}
.pie38 .pie_content{line-height: 100px;text-align: center;position: absolute;width: 100px;height: 100px;z-index: 8}
.pie38 .pie_left{position: absolute;top:0;left:0;width: 50px;height: 100px;overflow: hidden;}
.pie38 .pie_left:after{content: '';height: 100px;width:50px;border-right:50px solid red;position:absolute;top:0;left:0;transform: rotate(-137deg);}
</style>

<div class="pie38">
    <div class="pie_content">38%</div>
    <div class="pie_left"></div>
</div>

<style>
.pie88{width: 100px;height: 100px;border-radius: 50px;margin:20px;background-color: #ddd;position: relative;display: inline-block;overflow: hidden;}
.pie88 .pie_content{line-height: 100px;text-align: center;position: absolute;width: 100px;height: 100px;z-index: 8}
.pie88 .pie_left{position: absolute;top:0;left:0;width: 50px;height: 100px;overflow: hidden;background-color: red}
.pie88 .pie_right{position: absolute;top:0;right:0;width: 50px;height: 100px;overflow: hidden;}
.pie88 .pie_right:after{content: '';height: 100px;width:50px;border-left:50px solid red;position:absolute;right:0;top:0;border-radius: 50px;transform: rotate(-137deg);}
</style>

<div class="pie88">
    <div class="pie_content">88%</div>
    <div class="pie_left"></div>
    <div class="pie_right"></div>
</div>

總結

餅圖的例子，在測算結果頁仍是常常會用到的，能夠擴展爲加載框等其餘形式，代碼比較簡單易懂，相信相似的效果，還有不少方案的，歡迎留言...