CSS三角形和饼图

栏目: CSS · 发布时间: 6年前

内容简介:饼图的例子,在测算结果页还是经常会用到的,可以扩展为加载框等其他形式,代码比较简单易懂,相信类似的效果,还有很多方案的,欢迎留言...
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;}
复制代码

要点

transparent

拓展扇形

CSS三角形和饼图
border-radius: 50px
复制代码

饼图

思路

CSS三角形和饼图
  1. 先建一个圆,然后分左右两块。
  2. 左右两块里面在包含一个半圆,然后对其做旋转处理,来匹配对应的百分比,溢出隐藏处理

注意

  1. 因为是左右两块,所以要注意溢出隐藏,以达到最终效果
  2. 注意旋转的中心点
  3. 如果中心区域掏空的话,注意层级问题
  4. 如果百分比<=50%,可以不要右边那块
  5. 百分比跟旋转角度的对应换算(百分比/100*360)

例子

CSS三角形和饼图
<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>
复制代码

总结

饼图的例子,在测算结果页还是经常会用到的,可以扩展为加载框等其他形式,代码比较简单易懂,相信类似的效果,还有很多方案的,欢迎留言...


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Java Language Specification, Java SE 7 Edition

The Java Language Specification, Java SE 7 Edition

James Gosling、Bill Joy、Guy L. Steele Jr.、Gilad Bracha、Alex Buckley / Addison-Wesley Professional / 2013-2-24 / USD 59.99

Written by the inventors of the technology, The Java(r) Language Specification, Java SE 7 Edition, is the definitive technical reference for the Java programming language. The book provides complete, ......一起来看看 《The Java Language Specification, Java SE 7 Edition》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具