使用CSS3在一个圆中分段。-SegmentsinacircleusingCSS3

作者：Ycandy | 来源：互联网 | 2023-07-08 13:32

IknowyoucanmakeacircleinCSS3usingtheborderradiushack.Butisthereanywaytomakethem

I know you can make a circle in CSS3 using the border radius hack. But is there any way to make them have segments like this picture? Is there a way of doing this through HTML and CSS but not JS?

我知道你可以在CSS3里用边界半径来做一个圆。但是有没有办法让它们有像这幅图那样的片段呢?有没有一种方法可以通过HTML和CSS而不是JS来实现这一点?

enter image description here

2 个解决方案

#1

Yes, you can get such slices of custom angles using either one of the following two methods:

是的，您可以使用以下两种方法中的任何一种获得自定义角度的切片:

If you don't need the slices to be elements themselves, the you can simply do it with one element and linear gradients - see this rainbow wheel I did last month.
如果你不需要这些片本身就是元素，你可以简单地用一个元素和线性渐变来做——看看我上个月做的这个彩虹轮。
If you need the slices to be elements themselves, then you can do it by chaining rotate and skew transforms - see this circular menu I did a while ago.
如果您需要将切片作为元素本身，那么您可以通过链接旋转和倾斜转换来实现它——请参见我刚才做的这个循环菜单。

For #2, see also this very much simplified example I did right now.

对于#2，也可以看看我刚才做的这个非常简单的例子。

.pie {
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em; height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%; 
}
.slice:first-child {
  transform: rotate(15deg) skewY(-22.5deg);
}
.slice-contents {
  position: absolute;
  left: -100%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: lightblue;
}
.slice:first-child .slice-contents {
  transform: skewY(22.5deg); /* unskew slice contents */
}
.slice:hover .slice-contents { background: violet; } /* highlight on hover */

#2

Yes you can: http://jsfiddle.net/elias94xx/3rx7w/, http://jsfiddle.net/elias94xx/3rx7w/2/

是的，您可以:http://jsfiddle.net/elias94xx/3rx7w/， http://jsfiddle.net/elias94xx/3rx7w/2/

#chart {
  width: 0;
  height: 0;
  border-right: 60px solid purple;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

.chart {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

#chart1 {
  border-right: 60px solid red;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart2 {
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart3 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid blue;
  border-bottom: 60px solid transparent;
}

#chart4 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid yellow;
}

Source: http://www.paulund.co.uk/how-to-create-different-shapes-in-css

来源:http://www.paulund.co.uk/how-to-create-different-shapes-in-css

推荐阅读

settings
Material Design Lite ，简洁惊艳的前端工具箱。

2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ... [详细]

蜡笔小新 2023-10-13 13:44:20
settings
一篇文章搞定css3 3d效果

css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]

蜡笔小新 2023-10-11 12:41:15
javascript
如何使用JavaScript动态设置CSS3属性值

这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ... [详细]

蜡笔小新 2023-10-11 05:24:06
数组
CSS3实现背景颜色渐变

background:-webkit-gradient(linear,10%10%，100%100%， ... [详细]

蜡笔小新 2023-09-25 18:49:33
list
在DIV内垂直居中UL - Centering Vertically an UL inside a DIV

iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]

蜡笔小新 2023-09-16 19:05:52
list
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
php
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
php
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
javascript
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
list
python爬虫如何使用代理ip,Python ip代理

博主使用代理IP来自于网上免费提供高匿IP的这个网站用到的库frombs4importBeautifulSoupimportrandomimporturllib.re ... [详细]

蜡笔小新 2023-10-13 18:52:58
uri
为什么borderimage在CSS中很少被使用，你可能不知道的小知识

之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]

蜡笔小新 2023-10-13 16:23:53
javascript
试图实现向上箭头 - trying to achieve arrow pointing upwards

Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]

蜡笔小新 2023-10-09 19:41:30
javascript
怎么用css3实现图片的高斯模糊效果

小编给大家分享一下怎么用css3实现图片的高斯模糊效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后 ... [详细]

蜡笔小新 2023-09-24 14:56:09
javascript
CSS3背景颜色渐变效果

1.CSS3透明度渐变（从左到右）#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]

蜡笔小新 2023-09-17 20:26:32
less
webstorm开发vue组件时，支持scss/less等预处理语言

vue组件支持预处理语言的关键点：<stylerelstylesheetscss>.mint-swipe{hei ... [详细]

蜡笔小新 2023-09-17 15:50:09

Ycandy

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章