CSS代碼實(shí)現(xiàn)三角形和餅圖
發(fā)布時(shí)間：2018-08-03 16:53:01 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS代碼實(shí)現(xiàn)三角形和餅圖的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
.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;}
要點(diǎn)
transparent
拓展扇形
border-radius: 50px
餅圖思路
先建一個(gè)圓，然后分左右兩塊。
左右兩塊里面在包含一個(gè)半圓，然后對(duì)其做旋轉(zhuǎn)處理，來(lái)匹配對(duì)應(yīng)的百分比，溢出隱藏處理
注意
因?yàn)槭亲笥覂蓧K，所以要注意溢出隱藏，以達(dá)到最終效果
注意旋轉(zhuǎn)的中心點(diǎn)
如果中心區(qū)域掏空的話，注意層級(jí)問(wèn)題
如果百分比<=50%，可以不要右邊那塊
百分比跟旋轉(zhuǎn)角度的對(duì)應(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é)
以上所述是小編給大家介紹的CSS代碼實(shí)現(xiàn)三角形和餅圖，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
- 本文給大家?guī)?lái)一段代碼基于div+css實(shí)現(xiàn)三角形提示框，代碼簡(jiǎn)單易懂，需要的朋友可以參考下2016-09-20
- 下面小編就為大家?guī)?lái)一篇用CSS制作三角形和按鈕的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-15
CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法的相關(guān)資料,需要的朋友可以參考下2016-08-15利用CSS偽元素創(chuàng)建帶三角形的提示框的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇利用CSS偽元素創(chuàng)建帶三角形的提示框的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-01- 這篇文章主要為大家詳細(xì)介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下2016-06-28
- 這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡(jiǎn)單，如何繪制透明的三角形，本文為大家解決這個(gè)問(wèn)題，感興趣的小伙伴們可以參考一下2016-03-10
- 這篇文章主要幫助大家解決純css寫三角形在firefox下的鋸齒問(wèn)題，css如何實(shí)現(xiàn)小三角箭頭，文章為大家列出了常用方法，感興趣的小伙伴們可以參考一下2016-03-09