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
拓展扇形
border-radius: 50px
饼图思路
先建一个圆,然后分左右两块。
左右两块里面在包含一个半圆,然后对其做旋转处理,来匹配对应的百分比,溢出隐藏处理
注意
因为是左右两块,所以要注意溢出隐藏,以达到最终效果
注意旋转的中心点
如果中心区域掏空的话,注意层级问题
如果百分比<=50%,可以不要右边那块
百分比跟旋转角度的对应换算(百分比/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>
(资源库 www.zyku.net)
上一篇:css中margin-top或者margin-bottom失效的解决方法
栏 目:CSS
下一篇:修改CSS样式实现网页变灰色/黑白代码的几个方法整理
本文标题:CSS代码实现三角形和饼图实例
本文地址:https://www.zyku.net/css/1646.html
您可能感兴趣的文章
- 05-11修改CSS样式实现网页变灰色/黑白代码的几个方法整理
- 06-15HTML/CSS:div居中和div内部元素垂直居中
- 06-10css中margin-top或者margin-bottom失效的解决方法
- 03-17javascript 动态生成css代码的两种方法
- 03-15Sublime Text 3的Less2Css插件介绍与安装
- 03-11Yii2 加载css、js 载入静态资源
- 03-10利用SublimeLinter 编写高质量的 JavaScript & CSS 代
- 02-27css控制文字过长裁剪后面跟着省略号
- 02-20写给喜欢用DW编写CSS人的一些建议
- 02-20Dreamweaver生成新页面css的类失效
- 04-05oppofindx3无线充电设置教程
- 10-13苹果手机如何解绑丢失手表
- 12-25侯马生活-侯马生活应用软件功能介绍
- 01-11源源wifi掌中宝-源源wifi掌中宝应用软
- 02-24小米手环无法绑定手机解决方法
- 04-15小米11ultra电池温度查看方法
- 08-14织梦DedeCMS安装模块(插件)后台空白的
- 12-28白云菜谱-白云菜谱应用软件功能介绍
- 03-14荣耀50禁止应用开机自启方法
- 01-12趣唱-趣唱应用软件功能介绍
最近更新
阅读排行
猜你喜欢
- 09-17CentOS安装Tomcat教程
- 01-11月光小说-月光小说应用软件功能介绍
- 01-13睿来智能管控-睿来智能管控应用软件功
- 05-10Win10如何设置双屏显示器?Win10双屏显
- 02-20Linux chmod递归设置目录755和文件644
- 03-09苹果手机设置widget小组件教程
- 09-04procreate pocket和procreate区别介绍
- 01-17视界-视界应用软件功能介绍
- 02-24小米11ultra设置超级壁纸方法
- 09-14小天才电话手表设置快速呼叫教程介绍