HTML CSS 圆形切片不相等-6ren

HTML CSS 圆形切片不相等

转载作者：太空宇宙更新时间：2023-11-03 17:56:56

24

4

我正在尝试创建一个 8 段、45 度 Angular 的彩虹圈。

您会注意到橙色部分的大小是其他部分的两倍。我认为这些是 1 号和 8 号。但是我不知道如何将它们分开。我的学位错了吗？

感谢您的帮助。

body {
  overflow: hidden;
}
.pie {
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em;
  height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice1 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(-22.5deg) skewY(0deg);
}
.slice2 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(22.5deg) skewY(0deg);
}
.slice3 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(67.5deg) skewY(0deg);
}
.slice4 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(112.5deg) skewY(0deg);
}
.slice5 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(157.5deg) skewY(0deg);
}
.slice6 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(202.5deg) skewY(0deg);
}
.slice7 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(247.5deg) skewY(0deg);
}
.slice8 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(-67.5deg) skewY(0deg);
}
.slice-contents1 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #ffff4d;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents2 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #9AC147;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents3 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #639b47;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents4 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #3869c3;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents5 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #1e3868;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents6 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #c682bb;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents7 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #9a1d34;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents8 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #f7941e;
  text-align: center;
  transition: background-color .5s;
}
.slice1 .slice2 .slice3 .slice4 .slice5 .slice6 .slice7 .slice8 .slice-contents1 .slice-contents2 .slice-contents3 .slice-contents4 .slice-contents5 .slice-contents6 .slice-contents7 .slice-contents8 {
  transform: skewY(40deg) rotate(25deg);
}
.slice-contents1:hover {
  background: #ffff1a;
}
.slice-contents2:hover {
  background: #8db23c;
}
.slice-contents3:hover {
  background: #588a3f;
}
.slice-contents4:hover {
  background: #2d549b;
}
.slice-contents5:hover {
  background: #132340;
}
.slice-contents6:hover {
  background: #ad4f9e;
}
.slice-contents7:hover {
  background: #85192d;
}
.slice-contents8:hover {
  background: #f38809;
}

<html>

<body>


  <ul class='pie'>
    <li class='slice1'>
      <div class='slice-contents1'>#</div>
    </li>
    <li class='slice2'>
      <div class='slice-contents2'>#</div>
    </li>
    <li class='slice3'>
      <div class='slice-contents3'>#</div>
    </li>
    <li class='slice4'>
      <div class='slice-contents4'>#</div>
    </li>
    <li class='slice5'>
      <div class='slice-contents5'>#</div>
    </li>
    <li class='slice6'>
      <div class='slice-contents6'>#</div>
    </li>
    <li class='slice7'>
      <div class='slice-contents7'>#</div>
    </li>
    <li class='slice8'>
      <div class='slice-contents8'>#</div>
    </li>


    <ul>


</body>

</html>

最佳答案

哦，那很明显......你正在使用方形元素(li)并以不同的 Angular 旋转它来制作 pi..

根据您的设计，每个 li div 将是 90 度 ，而每个 45 度 将被其他元素隐藏，

对于第 7 个切片之前的每个元素都可以正常工作，但 Angular = 90 的第 8 个切片将覆盖黄色元素。

以你的 fiddle 为例..你会注意到只有你的橙色元素(切片 8)是 90 度，其余的都很好，除了隐藏在你的切片 8 中的黄色(切片 1)。

要解决它，您应该减少弧度以使其适合..

改变以下..你的馅饼会去

.slice-contents8 {
position: absolute;
left: -100%;
width: 200%; height: 200%;
border-radius: 50%;

text-align: center;
transition: background-color .5s;
background-image: linear-gradient(135deg, transparent 50%, #f7941e 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.slice8 {
overflow: hidden; /**/
position: absolute;
top: 0; right: 0;
width: 50%; height: 50%;
transform-origin: 0% 100%; 
transform: rotate(-112.5deg); 
}

请看下面的演示 Working Fiddle

关于HTML CSS 圆形切片不相等，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26101439/

24

4

0

文章推荐： ruby 切割场和保存

文章推荐： Ruby:二维数组

文章推荐： ruby 镐书说 attr_accessor 是类方法

文章推荐： javascript:移动设备上的插页式广告 - 您如何处理缩放？

python - 切片？
简而言之: 我怎样才能切片？也就是说，能够指定我想从多个索引(例如 y = x[(2, 5, 11)] )中提取，而不仅仅是单个索引(例如 y = x[2] )。简单示例 : 说我有这个数据: d
F# Array2D 切片
是否可以在 F# 中对 Array2D 进行切片？说，let tmp =Array2D.init 100 100 (fun x y -> x * 100 + y) 如何从 tmp 中检索某些列或某些
JavaScript html 切片
例如，我希望文本仅显示“此处”，但它不起作用。文本经常变化，但我需要的单词保持在固定位置。我想访问该词。我做错了什么？ function myFunction() { var x = doc
java - Spring分页和MongoDB切片中包含未知实例的页面/切片
当尝试使用spring的分页或切片来迭代非常大的mongodb集合时，程序运行正常，但在某些时候下一页/切片为空，并且在调试时出现“包含未知实例的页面/切片”消息. 这是代码示例: do { Pa
java - 切片 ListView
有人能给我一个关于如何分割 ListView 的例子吗？我正在使用 SimpleCursorAdapter 在 ListView 中显示数据.. 我的代码是这样的。 private WordDbAda
c++ - 切片，无可切片
这个问题在这里已经有了答案: C++ slicing causing leak / undefined behavior / crash (3 个答案) 关闭 8 年前。如果我有如下代码: cla
Python 切片 - 跳过一定数量的行
这个问题在这里已经有了答案: Understanding slicing (38 个答案) 关闭 5 年前。我目前有 500 行数据。我想使用前五十行，然后跳过 50 行，依此类推。我该如何继续这
没有维度的 Python 切片
为什么对一行或一列进行切片会产生“无量纲数组”？例如: import numpy as np arr = np.zeros((10,10)) print arr.shape # (10, 10) 但是
python - 切片、合并会计年度日期并将其映射到日历年日期到新列
我有以下 pandas 数据框: Shortcut_Dimension_4_Code Stage_Code 10225003 2 8225003
带有数组标准的 ruby 切片
如何通过数组为 ruby 中的散列创建切片，如下所示: info = { :key1 => "Lorem", :key2 => "something...", :key3 => "
Python 切片 - 除了括号中的内容以外的所有内容
这个问题在这里已经有了答案: regex to get all text outside of brackets (4 个答案) 关闭 5 年前。我正在编写的这个程序接收到一个大小不同的字符串，其
python - tensorflow 切片
我尝试使用 tf.Tensor.getitem 对张量进行切片功能如下: indices = [0, 5] data[:,:,indices] 但是我得到以下错误: TypeError: can on
没有副本的 Python 切片？
这个问题在这里已经有了答案: Can I create a "view" on a Python list? (10 个答案) 关闭 7 年前。有没有一种方法可以在 Python 3 中创建序列的
c# - 如何从多维数组中获取维度(切片)
我想弄清楚如何从多维数组中获取单个维度(为了论证，假设它是二维的)，我有一个多维数组: double[,] d = new double[,] { { 1, 2, 3, 4, 5 }, { 5, 4,
c++ - 切片 vector
我有一个 std::vector。我想创建代表该 vector 切片的迭代器。我该怎么做？在伪 C++ 中: class InterestingType; void doSomething(slice
Go学习笔记（9）Go容器类型——数组&切片&map
写在前面前面的文章介绍了Go的一些基本类型，本文开始涉及Go的一些容器类型，它们都是可以包含多个元素的数据结构，如数组、切片、map 数组数组是具有相同类型且长度固定的一组元素集合，定义的格式：v
python - 始终返回数组的 numpy 切片
给定一个 numpy 数组和一个 __getitem__ 类型的索引，是否有一种惯用的方法来获取数组的相应切片，总是返回一个数组而不是标量？有效索引的示例包括:int、slice、省略号或上述的元组
python - 切片 DataFrame 的子类时传递元数据
我创建了一个继承自 pandas.DataFrame 的类。在此类中添加了元数据(不是添加到列中，而是添加到类实例中): class MeasurementPoint(pandas.DataFrame
video - 如何在空间上将视频拆分为 NxM 切片？
我想在空间上剪切视频以生成 N x M 个文件。例如，我想把 test.video 拆分成 NxM 的瓦片？ Video tiles 最佳答案您可以使用 ffmpeg 及其 crop filter
javascript - 如何在页面加载时提取特定的 ampiechart 切片，
这是一个示例代码。比如我想拉德国在页面加载时切片。在这段代码中，它拉取第一个切片。无功图； var 传说; var chartData = [{ 国家:“立陶宛”，值:260}， { 国家:“爱

首页

博学

6Ren·AI

商城

HTML CSS 圆形切片不相等