首页 > 其他分享 >CSS 生成等份扇形

CSS 生成等份扇形

时间:2022-12-06 08:55:35浏览次数:39  
标签:... 生成 colors num let 扇形 drawSector CSS

 

 

<template v-for="item in 50"> 
        <div :key="item" v-if="item > 1" :style="{background:drawSector(item)}"         
      class="one"></div>
</template>    

drawSector(num = 2){
        let colors = ['#EEC900','#EEC591','#EEB4B4','#EEB422','#EEAEEE','#7D7D7D','#7D26CD','#7CFC00','#7CCD7C','#A1A1A1','#A0522D','#A020F0','#9FB6CD']
        colors = [...colors,...colors,...colors,...colors,...colors,...colors,...colors,...colors]      
        let perDeg = 360 / num
        let str = 'conic-gradient('
        for(let i=0;i<num;i+=1){
            str += `${colors[i]} ${i * perDeg}deg ${(i+1) * perDeg}deg,`
        }
        str = str.slice(0,-1)
        str += ')' 
        return str
    },

  

标签:...,生成,colors,num,let,扇形,drawSector,CSS
From: https://www.cnblogs.com/daifuchao/p/16954190.html

相关文章

  • css attr()函数
    cssattr()函数attr()理论上能用于所有的CSS属性但目前支持的仅有伪元素的content属性,其他的属性和高级特性目前是实验性的CSS表达式attr()用来获取选择到的元......
  • 如何基于钉钉通讯录同步生成本地LDAP服务
    上一篇​​​《利用飞书通讯录同步搭建本地LDAP》​​方案发出后,引起不少企业IT人员共鸣。本次针对使用了钉钉社交应用的企业推出基于钉钉通讯录(组织架构和用户信息)同步搭......
  • 生成压缩包的多种方式——Java【上】
    天气好冷,不想敲代码呀呀呀~日子还在继续,工作不能停!开始今天正题——文件操作【生成压缩包】如何生成压缩包呢?作为一个后端开发入门的打工人,首先想到还是用后端方式去解决。......
  • css3伪元素
    1、::first-line首行文本2、::first-letter首字母3、::selection被选中(高亮区域)4、:empty仅当元素为空时触发5、:only-child没有兄弟元素的子元素6、:fisrt-of......
  • React后台管理系统 04 配置路径别名、全局样式设置、模块化scss
    ts中对于@符号指定的路径不支持,同时vite中也是不支持的,所以我们需要在vite.config.ts中进行指定配置,path是node中自带的一个模块这里爆红的原因是没有进行声明:我们使用命......
  • CSS中的伪类
    1、什么是伪类?首先伪类是选择器的一种,它用于选择处于特定状态的元素。2、伪类的表现状态时什么样子的?伪类就是开头为冒号的关键字。例如::last-child3、常见的伪类有哪......
  • node js的token生成与验证之“jsonwebtoken“
    ❤️在繁华中自律,在落魄中自愈❤️目录​​一、生成token​​​​二、验证token​​​​三、完整的jwt.js代码​​​​四、配合express使用token验证​​​​五、/api/login接......
  • css实现聊天对话框效果
    效果:可以看做是一个长方形和一个三角形组成的,关键css代码:#talk{margin-left:50px;width:220px;height:60px;background:#9EEA6A;position:relative;......
  • JavaDoc生成文档
    JavaDoc生成文档一.通过命令行生成JavaDoc文档1.打开指定的文件目录选中指定文件(类或者包)--->右键选中openin---->explorer2.打开指定文件的cmd再1中打开的文......
  • css超出部分省略
    1.单行:.div1{width:100px;overflow:hidden;//内容会被修减,并且其余内容是不可见text-overflow:ellipsis;//显示省略号来代替被修减文本white-space:nowrap......