只用html和css画出不等分圆盘,不用canvas

简介:   .box{height: 200px;width: 200px;border-radius: 100%; overflow: hidden; margin: 200px; position: relative; } .

 

<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>

  

相关文章
|
13天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
21 0
|
3天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
8天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
14天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
937 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1289 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.2 图形的渲染
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.2节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1198 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.1 变形
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.1节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
978 0

相关实验场景

更多