<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. 二分图最大匹配(匈牙利算法) POJ 3020 Antenna Placement

    题目传送门 /* 题意:*的点占据后能顺带占据四个方向的一个*,问最少要占据多少个 匈牙利算法:按坐标奇偶性把*分为两个集合,那么除了匹配的其中一方是顺带占据外,其他都要占据 */ #include ...

  2. 转 form表单中name和id区别

          HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链接等.HTML的结构包括头部(Head).主体(Body)两大部分,其中头部描述浏览器所需 ...

  3. DataGridView 动态绑定 CheckBox

    下面演示如何在 DataGridView 中动态绑定 CheckBox: public class Test { /// <summary> /// 构造器 /// </summar ...

  4. 367 Valid Perfect Square 有效的完全平方数

    给定一个正整数 num,编写一个函数,如果 num 是一个完全平方数,则返回 True,否则返回 False.注意:不要使用任何内置的库函数,如  sqrt.示例 1:输入: 16输出: True示例 ...

  5. 【转载】Hadoop分布式文件系统HDFS的工作原理详述

    转载请注明来自36大数据(36dsj.com):36大数据 » Hadoop分布式文件系统HDFS的工作原理详述 转注:读了这篇文章以后,觉得内容比较易懂,所以分享过来支持一下. Hadoop分布式文 ...

  6. iOS基础笔试题 - 集锦一

    前言 下文转载自https://mp.weixin.qq.com/s?__biz=MzA4ODk0NjY4NA==&mid=454115946&idx=1&sn=c7f1b50 ...

  7. Android requestWindowFeature(Window.FEATURE_NO_TITLE)无效解决方法

    今天在<第一行代码>上学习做自定义标题栏,需要将系统自带的标题栏隐藏掉,使用自定义的标题栏,结果发现,requestWindowFeature(Window.FEATURE_NO_TITL ...

  8. python 正则表达式操作

    正则表达式操作  本模块提供了类似于Perl的正则表达式匹配操作.要匹配的模式和字符串可以是Unicode字符串以及8位字符串. 正则表达式使用反斜杠字符('\')来表示特殊的形式或者来允许使用特殊的 ...

  9. linux 怎么用 名字 代替 ip ？

    比如 ssh 1.1.1.1 变成 ssh usr1 在每台机子的/etc/hosts文件中添加ip与名字的对应表

  10. MAMP中Python安装MySQLdb

    Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. MySQLdb 是用于Python链接Mysql数据库的接口,它实现了 Py ...