CSS三角形和餅圖

羯瑞_發表於2018-08-02
CSS

關注公眾號：前端讀者（fe_duzhe），每日推文...

三角形

截圖4個三角形

.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三角形的規律的

擴充扇形

image

border-radius: 50px
複製程式碼

餅圖

思路

image

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

注意

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

例子

image

<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>
複製程式碼

總結

餅圖的例子，在測算結果頁還是經常會用到的，可以擴充套件為載入框等其他形式，程式碼比較簡單易懂，相信類似的效果，還有很多方案的，歡迎留言...

相關文章