只用html和css画出不等分圆盘,不用canvas
<style>
.box{height: 200px;width: 200px;border-radius: 100%;
overflow: hidden;
margin: 200px;
position: relative;
}
.tests{
border: transparent solid 100px;height: 0;width: 0;
border-top: 200px solid blue;
}
.item{height: 0;width: 0;position: absolute;left: 50%;top:-50%;}
</style>
<body>
<div class="box">
</div>
<script>
var list = [10,50,90,40,30,60,70,50],total=400,r=200,item_du=0,item_dus
var box = document.querySelector('.box');
for(var i =0;i<8;i++){
var p_b_w = r*Math.tan(list[i]/total*Math.PI)
var item = document.createElement('div')
item.setAttribute('class','item')
item.setAttribute('item',list[i])
item.setAttribute('style','border:solid transparent '+p_b_w+'px;border-top:'+'solid '+(i%2==0?'blue':'#ccc')+' '+r+'px;' +
'margin-left:-'+p_b_w+'px;transform-origin:'+p_b_w+'px '+r+'px;transform: rotate('+item_du+'deg)')
box.appendChild(item)
item_du = item_du+((list[i]/total+list[i+1]/total)*180)
}
</script>
只用html和css画出不等分圆盘,不用canvas的更多相关文章
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- CSS画出的各种形状图
利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...
- 情人节,教大家使用css画出一朵玫瑰花。
情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...
- 用css画出对话框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi
- CSS画出三角形(利用Border)
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
随机推荐
- The Chosen One
https://www.hackerrank.com/contests/101hack45/challenges/the-chosen-one 找出一个数字,使得,数组中只有一个数字不是这个数的约数, ...
- python与arduino串口通讯对接opencv实现智能物品分拣
2018-05-0118:53:50 先上图: 再来视频: http://v.youku.com/v_show/id_XMzU3NzAwNzMyNA==.html?spm=a2hzp.8244740. ...
- Angular——单页面实例
基本介绍 1.引入的route模块可以对路由的变化做出响应 2.创建的控制器中依然需要$http向后台请求数据 3.php中二维数据的遍历用的是foreach 4.php中$arr=array(),$ ...
- Farseer.net轻量级开源框架 入门篇:分类逻辑层
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 缓存逻辑层 下一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 ...
- Xcode 动态库及Framework 安装路径设置
使用Xcode开发动态库及Framework时,需要为其设置Install path.在设置Install path时,可能会使用到以下几个路径: 1)绝对路径: 绝对路径 ...
- poi导出word时设置兼容性
接上一篇poi导出word http://www.cnblogs.com/xiufengd/p/4708680.html. public static void setAuto(XWPFDocumen ...
- SqlBulkCopy实现大批量数据导入
//自增列重新生成:SqlBulkCopy bc = new SqlBulkCopy(conn) //自增列保留原值:SqlBulkCopy bc = new SqlBulkCopy(conn,Sql ...
- 更新dell机器的idrac的固件版本后重启机器系统失败
事情是这样的.dell ra620机器,idrac7打不开java,所以在机器生产中直接更新了固件,客户直接在系统内reboot后就连不上.打开本地是卡在下图. 强制重启后发现服务器提示,是IDRAC ...
- blog笔录1
(1)虚拟主机 (2)部署 部署完成后刷新页面会看到笑脸,在Home分组下控制器Application/Home/Controller/IndexController.class.php下定义显示 ( ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...