<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. LeetCode 要记得一些小trick

    最近搞了几场编程比赛,面试题或者是LeetCode周赛.每次都不能做完,发现时间不够用. 看了别人的代码才知道,同样实现相同的功能,可能别人只需要用一个恰当的函数,就会比自己少些不少代码,争得了时间. ...

  2. Spring.Net学习笔记(八)-设置配置文件参数

    一.开发环境 VS2013 .netframework4.5 spring.net1.3.1 二.项目结构 三.开发过程 1.编写Person类 namespace SpringNetConfigAr ...

  3. web测试--登录界面怎么测？

    具体需求: 有一个登陆页面, 上面有2个textbox, 一个提交按钮.  请针对这个页面设计30个以上的测试用例. 此题的考察目的: 面试者是否熟悉各种测试方法,是否有丰富的Web测试经验, 是否了 ...

  4. HTTP、HTTP1.0、HTTP1.1、HTTP2.0——笔记

    笔记来源地址:https://mp.weixin.qq.com/s/T2IErLDxbWP1a-VbRkZZHg HTTP: HTTP是WWW数据通信的基础,是应用层协议. HTTP是干什么的?用来给 ...

  5. 使用Unittest做单元测试，addTest（）单个case的时候却执行全部的case

    参考: http://tieba.baidu.com/p/6008699660 首先造成这个结果的原因是pycharm配置问题 问题验证: 测试代码: import unittest class Te ...

  6. selenium爬虫设置headers,代理IP等方法

    https://blog.csdn.net/xc_zhou/article/details/80823855

  7. Maya Calendar POJ - 1008 （模拟）

    简述 注意260天的情况,这个地方还是0年 代码 #include <iostream> #include <map> #include <sstream> usi ...

  8. Python使用Flask框架，结合Highchart处理jsonl数据

    1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 总结在Linux终端中进行算术运算的6种方式

    1.使用bash 使用双括号可以像C语言一样直接使用运算符进行计算. +)) a=$((*)) echo $a b=$(($a-)) echo $b d=$(($b/)) echo $d e=$(($ ...

  10. Centos7二进制文件安装MySQL5.7.25

    1.删除centos系统自带的mariadb数据库防止发生冲突 rpm -qa|grep mariadb rpm -e mariadb-libs --nodeps 2.安装libaio库 yum -y ...