需要引用的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 实现扇形图(锥形渐变)的更多相关文章

  1. CSS3_边框 border 详解_一个 div 的阴阳图

    (面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框 足够大     3. 需要的三角形的部分, border-top-color 设置为 ...

  2. 百度echarts扇形图每个区块增加点击事件

    效果图:操作人员要求 :我想看这个扇形图对应的 页面信息,给我加个链接跳转:原先的chart.js发现没有api,后来改用百度的echart.js <!DOCTYPE html> < ...

  3. Chart图表整合——面积对比图、扇形图、柱状图

    一. chart图表demo网址 网址:http://antv.alipay.com/zh-cn/f2/3.x/demo/index.html 二. 本文主要对面积对比图,扇形图,柱状图三大常见图进行 ...

  4. .NET 使用 Highcharts生成扇形图 柱形图

    1.首先新建一个.NET网站,如图所示: 2.引用所需要的js类库,如下图 highcharts.js可以在网上搜索就可以找到下载了. 3.在Default.aspx页面引用js 4.在 body 下 ...

  5. canvas锥形渐变进度条

    从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...

  6. 【基于WinForm+Access局域网共享数据库的项目总结】之篇二:WinForm开发扇形图统计和Excel数据导出

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  7. 一个div,包含两个div,调整文字位置和div平均分布

    网页中经常会用到,一个div下平均分布两个小的div,两个小的div,显示的内容为图片还比较好处理,显示文字则不好控制效果,今天写了一个如图效果的 html: <div class=" ...

  8. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  9. 分析实现Android自定义View之扇形图

    继承View基类,画了这样的扇形图 直接来步骤吧 (参考了GcsSloop的教程) 1.分析 自定义View需要认真的分析下,里面还是会用到一些数学知识 首先是扇形该怎么表现 1. 扇形的外观是个圆弧 ...

随机推荐

  1. 解决OX10.11.4 不能授权的问题

    Did apple server have some maintenance? Open your Terminal and put this command sudo mkdir -p /Users ...

  2. 使用Ajax异步加载页面时,怎样调试该页面的Js

    前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...

  3. css 居中问题

    水平居中有text-align:center 和 margin:0 auto,前者是针对父元素进行设置而后者则是对子元素.margin:0 auto; 这里实现的前提是子元素没有float 浮动起来, ...

  4. Ubuntu 14.04 编译安装 husky

    简介 Husky是一个大数据分布式开发框架,用C++开发,因为粗粒度(coarse-grained)平台(如Spark,Hadoop,Flink)MR耗时太大,然后细粒度(fine-grained)平 ...

  5. xmpp openfire smack 介绍和openfire安装及使用

    前言 Java领域的即时通信的解决方案可以考虑openfire+spark+smack.当然也有其他的选择. Openfire是基于Jabber协议(XMPP)实现的即时通信服务器端版本,目前建议使用 ...

  6. docker在centos7下的一些坑

    在centos的docker上安装mysql提示chown mod /var/lib/mysql permission denied,通过下面的方法1解决. 在centos上挂载数据卷,在容器内部访问 ...

  7. 在Centos6下面安装Python3.4

    yum源里头好像没有python3.4 在Python的官网下载Python3.4的源代码 然后: 安装依赖包: yum groupinstall "Development tools&qu ...

  8. CentOS 系统目录解析

    CentOS 系统目录解析 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMzEzNg==&mid=202463614&idx=2&sn=51 ...

  9. simple mail example for smtp debug

    vim /etc/mail.rc head /etc/rc.local | mail -s "test_email" pyz_sub1@mailtest.com

  10. php 下载文件代码段

    /** * 下载 * @param [type] $url [description] * @param string $filename [description] * @return [type] ...