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

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

  

时间: 2024-10-10 00:05:49

只用html和css画出不等分圆盘,不用canvas的相关文章

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行

css 画出三角形

技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: 10px solid red; 当然,关于三角形指向这个,这里是指向右边,所以用了 border-left 左 → border-right 上 → border-bottom 下 → border-top

不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?

样式如何?是不是感觉不可能.告诉你这是可能的 没有用到任何的图片和 js .该时钟有时针.分针以及秒针,在时钟的圆盘内,都有详细的刻度标记,在时间中央还有数字时钟显示,功能可谓十分强大,界面十分精致. 在css3的渲染下,拥有华丽的视觉界面,这个纯css3精致时钟,你值得拥有! 其主要的实现原理是用animation.transform等属性来实现时钟的走动以及数字时钟的跳动:再结合使用linear-gradient.border-radius.box-shadow等属性来美化时钟的界面.可见原

用CSS画出好玩的图形

1.上三角 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 2.平行四边形 #parallelogram { width: 150px; height: 100px; margin-left:20px; -webkit-transform: skew(20d

用CSS画英文字母

起因是在网上看到了有人用纯css画出了英文字母,感觉不难,了解过css3的话都会感觉思路比较直观 主要用到的css知识点:绝对定位,圆角属性以及元素的宽高均为零时边框的挤压性质 效果图 源代码 <!DOCTYPE html> <html> <head> <title>CSS-Letter</title> <meta charset="utf-8"/> <style type="text/css&qu

35.在CSS中 只用一个 DOM 元素就能画出国宝熊猫

原文地址:https://segmentfault.com/a/1190000015052653 感想: 真神奇! HTML code: <div class="panda"></div> CSS code: html, body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color

运用椭圆画法,45行代码画出任意正多边形

最近做Box2dWeb开发时,想写个创建正多边形的功能,可是由于学识尚浅,我在草稿纸上画了,想了一个上午也没有研究出什么好方法.后来翻抽屉的时候,找出了以前哥哥画的一张用同心圆画椭圆的示意图.看到这幅画,我不禁在想椭圆不就是一个N边形吗?圆不就是一个正N边形吗?如果把两个同心圆的半径设定为相等,画出来的椭圆不就是一个圆吗?因此,我立刻开始实验.原本我以为比较难,会用到圆的解析式之类的,没想到就45行代码就搞定了,主要用到的数学知识就是sin和cos. 也许有人不明白如何用同心圆画椭圆,我就借用网

Effective前端3:用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 1 #square {