如何使用css渐变制作半圆

Question

我需要创建一个 div 元素，其背景由半圆分割的两种颜色组成：

我想使用渐变，因为它对于动画目的来说会更方便。我不想使用伪元素或边界半径及其偏角。另外，我的 HTML 结构有限；我的 div 元素必须只包含文本，没有标签。

我知道渐变是很多类似事情的关键，但无法创建我想要的东西。

如果有人能帮助我，我会很高兴。非常感谢，祝你有愉快的一天。

Answer 1

你可以像下面这样做：

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

  line-height: 2em; /* conrtol 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,
    linear-gradient(pink 0 0) 0/calc(var(--p)*100%)
    lightblue;
  background-repeat: no-repeat;
  
  
  text-align: center;
  border: 1px solid #000;
  margin: 10px;
}

<div class="box"> Some text </div>
<div class="box" style="--p:.2"> Some text </div>
<div class="box" style="--p:.6"> Some text </div>
<div class="box" style="--p:.8"> Some text </div>