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>
复制代码

总结

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


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

查看所有标签

猜你喜欢:

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

失控

失控

[美] 凯文·凯利 / 东西文库 / 新星出版社 / 2011-3 / 98.00元

2006年,《长尾理论》的作者克里斯·安德森在亚马逊网站上这样评价该书: “这可能是90年代最重要的一本书”,并且是“少有的一年比一年卖得好的书”。“尽管书中的一些例子在十几年后可能有些过时,但(它们所表达的)信息却越来越成为真知灼见”。“在那时人们还无法想象博客和维基等大众智慧的突起,但凯利却分毫不差地预见到了。这可能是过去十年来最聪明的一本书。” 这是《黑客帝国》主要演员的必读物之......一起来看看 《失控》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换