<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的更多相关文章

  1. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  2. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  5. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  6. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  7. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  8. 用css画出对话框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi

  9. CSS画出三角形（利用Border）

    画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...

随机推荐

  1. JD笔试

    题目表述: 给定n道题目,以及每道题目答对的概率,问小明能及格的概率. 样例: 40 50 50 50 50 0.31250 思路: 递归枚举对的题目个数,最后TLE之过40%: 知道正确解法是DP, ...

  2. SQL数据库基础————委托

    委托:也称为代理,事件也是一种委托:定义在类的最外面 1.定义委托关键字:delegate函数签名:签名和函数保持一致定义委托的时候要根据函数来定义public delegate int First( ...

  3. SpringBoot 2.x （1）：手动创建项目与自动创建项目

    SpringBoot 2.x基于Spring Framework 5.x 环境需求如下: JDK1.8或以上 Maven3.2或以上 这里我使用的是Eclipse,IDEA这个工具很强大,但不习惯它 ...

  4. malloc()函数的使用

    malloc是向系统申请分配指定size个字节的内存空间.返回值类型为void *类型.void *表示未确定的类型指针.C语言中,void *类型可以强制转换为任何其他类型的指针. 语法:void ...

  5. CF814B An express train to reveries

    思路: 模拟,枚举. 实现: #include <iostream> using namespace std; ; int a[N], b[N], cnt[N], n, x, y; int ...

  6. 树莓派连接arduino（USB串口通讯）

    2018-06-0115:12:19 https://blog.csdn.net/song527730241/article/details/50884890 重要步骤  查看端口:(ttyUSB0或 ...

  7. 实例化Class类的5种方式

    Java的数据类型可以分为两类,即引用类型和原始类型.对于每种类型的对象,Java虚拟机会实例化不可变的java.lang. Class对象.它提供了在运行时检查对象属性的方法,这些属性包括它的成员和 ...

  8. JDBC更新10W级以上数据性能优化

    随笔缘由: 系统完成到一定程度,少不了要往数据库中添加大量数据进行性能测试. 我用程序做数据10W条,使用jdbc批更新的API,发现每次只能插入2W多条记录. 一番小小研究,觉得总结一下可能有些意义 ...

  9. Hibernate框架之HQL查询与Criteria 查询的区别

    Hibernate框架提供了HQL查询和Criteria 查询.下面对这两种查询分别做个例子.也好对这两种查询方法有个大概的了解.就用房屋信息表做例子,查询所有房屋信息. HQL语句查询所有房屋信息: ...

  10. cstring replace

    //使用后将图纸名称存储到配置 换行符用^^替换 m_sTZMC.Replace(_T("\r\n"), _T("^^")); ini.SetValueOfKe ...