我想用不同的 colored颜色 在css中画一个半圆弧,如图所示.

enter image description here

我使用了以下代码.

超文本标记语言

 <div class="gradient">
   <span class="one"></span>
   <span class="two"></span>
   <span class="three"></span>
   <span class="four"></span>
   <span class="five"></span>
 </div>

CSS

.gradient span{

height: 10px;
display: block;
width: 100px;
}

.gradient .one{
  background-color: red;
}

.gradient .two{
  background-color: green;
}

.gradient .three{
  background-color: yellow;
}

.gradient .four{
  background-color: black;
}

.gradient .five{
  background-color: orange;
}

事实上,我想使这个半尺的CSS与圆角的每个跨度.

推荐答案

你可以用conic-gradientradial-gradient来做类似的东西,但 colored颜色 上没有圆角.

.round {
  --start: -90deg;
  --m: 1.8deg;
  position: relative;
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotate(var(--start));
  background-image: 
    radial-gradient(circle at 50% 50%, white 0%, white 66%, transparent 66%, transparent 100%),
    conic-gradient(#ff8b8b calc(0deg + var(--m)),
      #ff8b8b calc(36deg - var(--m)),
      transparent calc(36deg - var(--m)),
      transparent calc(36deg + var(--m)),
      #ffd68b calc(36deg + var(--m)),
      #ffd68b calc(72deg - var(--m)),
      transparent calc(72deg - var(--m)),
      transparent calc(72deg + var(--m)),
      #f7ff8b calc(72deg + var(--m)),
      #f7ff8b calc(108deg - var(--m)),
      transparent calc(108deg - var(--m)),
      transparent calc(108deg + var(--m)),
      #bfff8b calc(108deg + var(--m)),
      #bfff8b calc(144deg - var(--m)),
      transparent calc(144deg - var(--m)),
      transparent calc(144deg + var(--m)),
      #68ff68 calc(144deg + var(--m)),
      #68ff68 calc(180deg - var(--m)),
      transparent calc(180deg - var(--m)),
      transparent calc(360deg + var(--m))
  );
}
<div class="round"></div>

Html相关问答推荐

如何格式化HTML文本,使其环绕关键字

CSS位置:固定尊重母公司的保证金属性.""'为什么?

需要关于HTML的建议

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

我无法从带Angular 的Bootstrap 5中的表单中获取数据

如何创建剪切到路径的循环文本字幕?

为什么根捕获上的`min-height`溢出,而`height`没有?

如何使背景图像在面包屑中相互重叠

HTML 重定向到当前服务器

在span中添加

如何检测输入字段是否没有必填且没有占位符?

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

当悬停时,同时影响相邻的两侧div

如何截断一些文本并用双引号引起来?

CSS 斜角与 3 行对齐

如何创建带有偏移边框线的双色边框?

另一个 flex 元素之间的 CSS 空间

绝对定位的 div 与另一个静态定位的 div 的边距顶部一起移动

AWS SES:如何正确使用 CSS

网站页脚中的 Quarto 安装版本