一个 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. 扇形的外观是个圆弧 ...
随机推荐
- Java中OutOfMemoryError(内存溢出)的三种情况及解决办法
转载自:http://blog.sina.com.cn/s/blog_701c951f0100n1sp.html 相信有一定java开发经验的人或多或少都会遇到OutOfMemoryError的问题, ...
- Spark java.lang.outofmemoryerror gc overhead limit exceeded 与 spark OOM:java heap space 解决方法
引用自:http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c42246 ...
- MySql unique的实现原理简析
1.测试过程如下: CREATE TABLE `test` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) DEFAULT NULL, PRIMARY KEY ( ...
- Python学习【第八篇】Set集合
Set集合 set集合是无序,不能重复,可嵌套的序列 如何创建 li = [] dic = {"k1":123} se = {"123","456&q ...
- Android 基于Android的手机邮件收发(JavaMail)之四(邮件的发送)
上一个邮件的接受,因为不当操作,保存未完成,一切东西都得从头开始那就先从邮件发送来吧. 先下我们做一个较为简单的邮件发送 以下是源代码:相信看过上篇文章所给连接的人,对于javamail应该都有了一定 ...
- 简单的js菜单
<!DOCTYPE html> <html> <head> <title>hovertree</title><base target= ...
- openfire更改数据库
修改openfire安装目录下./conf/openfire.xml <setup>true</setup>中的true为false,重新启动,然后配置
- 数据库触发器inserted和deleted详解
create trigger updateDeleteTime on user for update as begin update user set UpdateTime=(getdate()) ...
- activity 四种启动模式
前言 Activity的启动模式决定了Activity的启动运行方式 四种模式 Activity启动模式设置: <activity android:name=".MainActivit ...
- Html5特性及简介