如何使用CSS渐变来制作半圆

aij0ehis 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(124)

我需要创建一个div元素，它的背景是由两种颜色组成的，用一个半圆分割：
x1c 0d1x的数据
我想使用渐变，因为它将更方便地用于动画目的。我不想使用伪元素或border-radius及其偏角。此外，我受HTML结构的限制;我的div元素必须只包含文本，没有标签。
我知道渐变是很多类似事情的关键，但我没有创造出我想要的东西。
如果有人能在这方面帮助我，我会非常高兴。非常感谢，祝你有美好的一天。

css

来源：https://stackoverflow.com/questions/77782935/how-to-use-css-gradients-to-make-half-circles

3条答案

按热度按时间

jfgube3f1#

线性和径向渐变的组合效果很好。

.fancy {
  min-height: 5rem;
  margin: 2rem;
  background: radial-gradient(circle closest-side, #F08080 100%, transparent), 
              linear-gradient(to right, #F08080, #F08080 50%, #6495ED 50%);
}

个字符

赞(0）回复(0）举报 2024-01-09

imzjd6km2#

你可以像下面这样做：

.box {
  --p:.5; /* progression (from 0 to 1) */

  line-height: 2em; /* control the height of the element */
  width: 200px;
  background:
    radial-gradient(100% 50% at left, pink 98%,#0000)
     calc(var(--p)*100% + var(--p)*.5lh) /.5lh,
    conic-gradient(lightblue 50%,pink 0) 
     calc((1 - var(--p))*100%)/200%;
  background-repeat: no-repeat;
  
  
  text-align: center;
  border: 1px solid #000;
  margin: 10px;
}

个字符

赞(0）回复(0）举报 2024-01-09

mbjcgjjk3#

你也可以用基本的CSS属性来构建它：

<div style="border: 1px solid violet; background-color: yellow">
    <div style="position: absolute; width: 100%; text-align: center">
      Lorem ipsum
    </div>
    <div
      style="
        width: 50%;
        height: 20px;
        border-radius: 0 8px 8px 0;
        background-color: red;
      "
    ></div>
  </div>

字符串
Result picture

赞(0）回复(0）举报 2024-01-09

我来回答

如何使用CSS渐变来制作半圆

3条答案

相关问题

热门标签

最新问答