<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. TCP/IP 3握手4挥手

    转:摘自<图解TCP/IP>P204 三次握手与四次挥手的状态转移图如下: 如图,由于第二次握手接收端发送SYN+ACK信号所以握手只用了三次,挥手由于接收端ACK和FIN分两次发的,所以 ...

  2. c++自动导出lua绑定

    cocos 使用bindings-generator脚本代替了toLua++. 编写效率大大提高. 具体的在本机中分享:http://note.youdao.com/noteshare?id=0f41 ...

  3. Silverlight环境配置

    今天对Silverlight安装环境进行了配置,本系统已经安装VS2010 和 Silverlight 5. 要开发Silverlight必须安装Developer Runtime 和 SDK , 且 ...

  4. 使用openssl搭建CA并颁发服务器证书

    本来整理了一份执行脚本,但是没有找到附件功能.只好直接贴当时自己看过的链接了. 文章标题:Openssl Certificate Authority 转载链接:https://jamielinux.c ...

  5. 梦想CAD控件安卓参数绘图

    在CAD绘图中,参数化绘图可以帮助我们极大缩短设计时间,用户可以按照设计意图控制绘图对象,这样即使对象发生了变化,具体的关系和测量数据仍将保持不变,能够对几何图形和标注进行控制,可以帮助用户应对耗时的 ...

  6. 关于DOS-BOX的使用方法

    将MASM文件夹里的全部文件拷贝到一个目录下,比如E:\masm下,然后将这个目录挂着为DOSBox的一个盘符下,挂载命令为 Mount c e:\masm 切换到E盘 然后编译,运行

  7. vuecli开发项目，文件打包后，appjs/vendorjs文件过大

    项目上线后,浏览器第一次加载会特别特别慢,network中看到vendorjs文件1.9M,不慢才怪. echarts按需引入后,也有1.1M左右,由于对vue脚手架理解不深,自己扒了大量的文档,又测 ...

  8. [Algorithm] 9. Two Sum

    Description Given an array of integers, return indices of the two numbers such that they add up to a ...

  9. [luogu3067 USACO12OPEN] 平衡的奶牛群

    传送门 Solution 折半搜索模板题 考虑枚举每个点在左集合和右集合或者不在集合中,然后排序合并即可 Code //By Menteur_Hxy #include <cmath> #i ...

  10. ubuntu 14.04 挂载window共享目录

    (1) 先在ubuntu系统里,新建一个目录用于挂载,目录假设为 /mnt/win: sudo mkdir /mnt/win (2)在windows系统,共享出一个文件夹,共享名称假设为www sud ...