.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;}

要點

transparent

拓展扇形

border-radius: 50px

餅圖思路

先建一個圓，然后分左右兩塊。
左右兩塊里面在包含一個半圓，然后對其做旋轉(zhuǎn)處理，來匹配對應(yīng)的百分比，溢出隱藏處理
 

注意

因為是左右兩塊，所以要注意溢出隱藏，以達到最終效果
 

注意旋轉(zhuǎn)的中心點
 

如果中心區(qū)域掏空的話，注意層級問題
 

如果百分比<=50%，可以不要右邊那塊
 

百分比跟旋轉(zhuǎn)角度的對應(yīng)換算（百分比/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>

總結(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• 用CSS3怎么實現(xiàn)按鈕動態(tài)漸變的效果，方法是什么

  這篇文章主要介紹了利用div+css3實現(xiàn)一個背景漸變的button按鈕的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

• CSS中圖片亮度怎樣控制，如何低亮度顯示？

  這篇文章給大家分享的是CSS中圖片亮度的控制顯示方法。小編覺得挺實用的，因此分享給大家做個參考，文中的示例代碼介紹得很詳細，有需要的朋友可以參考，接下來就跟隨小編一起了解看看吧。

• 用CSS如何制作氣泡框的三角形效果

  實現(xiàn)的原來就是：在一個寬高為0像素的塊狀元素中設(shè)置border屬性，例如.box{width:0px;height:0;border-bottom:50px#F00solid;border-left:50px#03Fsolid;border-right:50px#F90solid;border-top:50px#6C0solid;}在瀏覽器中的顯示如圖：這樣就有上下左右四個三角形了，再把除了要用的三角外的其他3個三角（border）顏色設(shè)置 ...

• 一文帶你搞懂CSS中border邊框

  這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS border(邊框),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

• 使用css怎樣做一個波動水球的特效？

  我們知道使用CSS可以實現(xiàn)很多特效，這篇文章就給大家分享一個使用css做一個波動水球的特效的內(nèi)容，小編覺得比較有趣，實現(xiàn)效果及代碼如下，感興趣的朋友就繼續(xù)往下看吧。