需要引用的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. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...

  2. ASP.Net一键自动化更新代码、编译、合并dll、压缩js、css、混淆dll、zip打包、发布到测试环境的bat批处理

    不废话,直接代码: D: cd D:\src\testproj\PrecompiledWeb svn revert ../ -R svn update .. rmdir BS /S /Q C:\Win ...

  3. Struts2与Ajax的整合

    整合: 导入jar包 sturts2-json-plugin-2.1.8.1.jar 说明: 在该jar包中有struts-plugin.xml文件 <struts>            ...

  4. pring — jdbc 配置文件的设置

    ---参考配置,  链接mysql 数据库 <!-- 1.配置数据源 --><bean id="dataSource" class="org.sprin ...

  5. java设计模式之工厂方法探究

    简单工厂 + 工厂方法 + 抽象工厂       看了十几篇博客,每篇基本上都能有个自己的解释,我汇总这些内容,重新梳理整理了一番,以形成自己的理解.       简单工厂模式其实不算23种设计模式之 ...

  6. Nginx 安装

    1 编译环境 yum -y groupinstall "Development Tools" "Server Platform Development"   2 ...

  7. 控制反转IOC的依赖注入方式

    引言: 项目中遇到关于IOC的一些内容,因为和正常的逻辑代码比较起来,IOC有点反常.因此本文记录IOC的一些基础知识,并附有相应的简单实例,而在实际项目中再复杂的应用也只是在基本应用的基础上扩展而来 ...

  8. JDBC数据库1

    数据库(Database)是按照数据结构来组织,存储,和管理数据的仓库.数据库有很多类型,从简单存储各种数据的的表格到能够储存大型数据的系统,在各方面得到了广泛的应用.数据库简介J.Martin给 数 ...

  9. 查看https是否支持ATS

    nscurl --ats-diagnostics --verbose https://我的域名

  10. sql中datetime 和 timestamp

    datetime 1.允许为空值,可以自定义值,系统不会自动修改其值. 2.不可以设定默认值,所以在不允许为空值的情况下,必须手动指定datetime字段的值才可以成功插入数据. 3.虽然不可以设定默 ...