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

推荐阅读

php
13、单向链表

头文件：LinkList.hLinkList.cmain.cVS2 ... [详细]

蜡笔小新 2024-11-27 14:45:45
function
拖拉切割直线

拖拉切割直线 ... [详细]

蜡笔小新 2024-11-27 19:20:38
php
C语言初学者指南：利用二维数组与结构体实现贪食蛇游戏

本文面向非计算机专业背景的编程爱好者，介绍如何仅使用基础的C语言知识——二维数组和结构体，无需掌握复杂的数据结构如链表，即可编写一款经典的贪食蛇游戏。通过本教程，您将了解游戏开发的基本原理和实现方法。 ... [详细]

蜡笔小新 2024-11-27 18:05:55
install
Python中调用Java代码的方法与实践

本文探讨了如何在Python环境中集成并调用Java代码，通过具体的步骤和示例展示了这一过程的技术细节。适合对跨语言编程感兴趣的开发者阅读。 ... [详细]

蜡笔小新 2024-11-27 17:54:57
install
Qt TCP通信中的多线程服务器端设计

本文探讨了在Qt框架下实现TCP多线程服务器端的方法，解决了一个常见的问题：服务器端仅能与最后一个连接的客户端通信。通过继承QThread类并利用socketDescriptor标识符，实现了多个客户端与服务器端的同时通信。 ... [详细]

蜡笔小新 2024-11-27 16:31:40
php
UVA 401 - 镜像回文字符串

本题探讨了如何判断一个字符串是否为普通回文、镜像回文或两者都不是。通过特定的字符映射表来实现字符串的镜像转换，并根据转换后的结果进行分类。 ... [详细]

蜡笔小新 2024-11-27 13:54:55
php
代码生成器实战教程：提升编程效率的利器

本系列文章旨在通过一系列实践案例，详细介绍如何利用代码生成器提高开发效率。本文将引导您完成从下载安装到实际应用的全过程。 ... [详细]

蜡笔小新 2024-11-27 12:05:48
function
MVC框架下使用DataGrid实现时间筛选与枚举填充

本文介绍如何在ASP.NET MVC项目中利用DataGrid组件增强搜索功能，具体包括使用jQuery UI的DatePicker插件添加时间筛选条件，并通过枚举数据填充下拉列表。 ... [详细]

蜡笔小新 2024-11-27 11:02:33
format
初学者指南：使用CSS为博客园文章中的超链接添加图标

作为一名CSS初学者，我在博客园中尝试通过CSS美化页面，特别是为超链接添加图标，以提升阅读体验。本文将分享如何使用CSS和字体图标库来实现这一功能。 ... [详细]

蜡笔小新 2024-11-27 08:43:46
function
多行数据合并为单行的SQL技巧与案例

本文介绍了多种将多行数据合并为单行的方法，包括使用动态SQL、函数、CTE等技术，适用于不同的SQL Server版本。 ... [详细]

蜡笔小新 2024-11-27 00:17:20
format
字符、字符串和文本的处理之Char类型

.NetFramework中处理字符和字符串的主要有以下这么几个类:(1)、System.Char类一基础字符串处理类(2)、System.String类一处理不可变的字符串(一经 ... [详细]

蜡笔小新 2024-11-26 21:04:40
install
深入探讨Web服务器与动态语言的交互机制：CGI、FastCGI与PHP-FPM

本文详细解析了Web服务器（如Apache、Nginx等）与动态语言（如PHP）之间通过CGI、FastCGI及PHP-FPM进行交互的具体过程，旨在帮助开发者更好地理解这些技术背后的原理。 ... [详细]

蜡笔小新 2024-11-26 20:03:27
audio
探索HTML5：十五个关键的新特性

本文深入探讨了HTML5中十五个重要的新特性，为开发者提供了详细的指南。 ... [详细]

蜡笔小新 2024-11-26 19:09:22
md5
基于OpenCV的小型图像检索系统开发指南

本文详细介绍了如何利用OpenCV构建一个高效的小型图像检索系统，涵盖从图像特征提取、视觉词汇表构建到图像数据库创建及在线检索的全过程。 ... [详细]

蜡笔小新 2024-11-26 12:58:31
function
Laya 实战教程：模型与动画的导入技巧

在进行模型和动画的导出过程中，需要注意隐藏不必要的场景元素，并确保所需导出的对象位于顶级节点。此外，在导出设置中正确选择节点配置，并为带有动画的对象添加Animator控制器组件，以确保动画能够正常播放。 ... [详细]

蜡笔小新 2024-11-26 09:09:17

Ycandy

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

Tags | 热门标签

RankList | 热门文章