一个 div 实现扇形图(锥形渐变)
需要引用的js文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="http://leaverou.github.io/conic-gradient/conic-gradient.js"></script>
css样式
.bt {
width: 99px;
height: 99px;
border-radius: 50%;
background:conic-gradient(#F7CD07 50%,#A6E33C 50% ,#A6E33C 100%)
}
.bt1 {
width: 99px;
height: 99px;
border-radius: 50%;
background:conic-gradient(#A6E33C 33.33% ,#F7CD07 33.33%, #F7CD07 66.66%,#666 66.66%, #666 100%)
}
div容器
<div class="bt"></div>
<div class="bt1"></div> 相关资料
http://leaverou.github.io/conic-gradient/
一个 div 实现扇形图(锥形渐变)的更多相关文章
- CSS3_边框 border 详解_一个 div 的阴阳图
(面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框 足够大 3. 需要的三角形的部分, border-top-color 设置为 ...
- 百度echarts扇形图每个区块增加点击事件
效果图:操作人员要求 :我想看这个扇形图对应的 页面信息,给我加个链接跳转:原先的chart.js发现没有api,后来改用百度的echart.js <!DOCTYPE html> < ...
- Chart图表整合——面积对比图、扇形图、柱状图
一. chart图表demo网址 网址:http://antv.alipay.com/zh-cn/f2/3.x/demo/index.html 二. 本文主要对面积对比图,扇形图,柱状图三大常见图进行 ...
- .NET 使用 Highcharts生成扇形图 柱形图
1.首先新建一个.NET网站,如图所示: 2.引用所需要的js类库,如下图 highcharts.js可以在网上搜索就可以找到下载了. 3.在Default.aspx页面引用js 4.在 body 下 ...
- canvas锥形渐变进度条
从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇二:WinForm开发扇形图统计和Excel数据导出
篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...
- 一个div,包含两个div,调整文字位置和div平均分布
网页中经常会用到,一个div下平均分布两个小的div,两个小的div,显示的内容为图片还比较好处理,显示文字则不好控制效果,今天写了一个如图效果的 html: <div class=" ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- 分析实现Android自定义View之扇形图
继承View基类,画了这样的扇形图 直接来步骤吧 (参考了GcsSloop的教程) 1.分析 自定义View需要认真的分析下,里面还是会用到一些数学知识 首先是扇形该怎么表现 1. 扇形的外观是个圆弧 ...
随机推荐
- 解决OX10.11.4 不能授权的问题
Did apple server have some maintenance? Open your Terminal and put this command sudo mkdir -p /Users ...
- 使用Ajax异步加载页面时,怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
- css 居中问题
水平居中有text-align:center 和 margin:0 auto,前者是针对父元素进行设置而后者则是对子元素.margin:0 auto; 这里实现的前提是子元素没有float 浮动起来, ...
- Ubuntu 14.04 编译安装 husky
简介 Husky是一个大数据分布式开发框架,用C++开发,因为粗粒度(coarse-grained)平台(如Spark,Hadoop,Flink)MR耗时太大,然后细粒度(fine-grained)平 ...
- xmpp openfire smack 介绍和openfire安装及使用
前言 Java领域的即时通信的解决方案可以考虑openfire+spark+smack.当然也有其他的选择. Openfire是基于Jabber协议(XMPP)实现的即时通信服务器端版本,目前建议使用 ...
- docker在centos7下的一些坑
在centos的docker上安装mysql提示chown mod /var/lib/mysql permission denied,通过下面的方法1解决. 在centos上挂载数据卷,在容器内部访问 ...
- 在Centos6下面安装Python3.4
yum源里头好像没有python3.4 在Python的官网下载Python3.4的源代码 然后: 安装依赖包: yum groupinstall "Development tools&qu ...
- CentOS 系统目录解析
CentOS 系统目录解析 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMzEzNg==&mid=202463614&idx=2&sn=51 ...
- simple mail example for smtp debug
vim /etc/mail.rc head /etc/rc.local | mail -s "test_email" pyz_sub1@mailtest.com
- php 下载文件代码段
/** * 下载 * @param [type] $url [description] * @param string $filename [description] * @return [type] ...