如何为Div添加渐变背景并将其设置为半圆形？

我已经给一个div设置了渐变背景，用absolute定位放到了正确位置，但不知道怎么把它改成半圆形。当前代码如下：

<div
    className="absolute top-[50%] right-[-600px] w-[50%] h-[50%] opacity-40"
    style={{
        background:
        "linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%)",
        zIndex: -1
    }}
></div>

添加Tailwind的rounded-full类没效果。

rounded-full没效果是因为你的div宽高相等（都是50%），这时候加这个类会变成正圆形。要做半圆形，得调整宽高比例，再配合单侧圆角类：

横向半圆形（左/右半圆） #

把宽度设为高度的2倍，然后给单侧加全圆角：

• 右侧半圆：用rounded-r-full，同时把宽度改成w-[100%]，高度保持h-[50%]
• 左侧半圆：用rounded-l-full，宽度w-[100%]，高度h-[50%]

右侧半圆的代码示例：

<div
    className="absolute top-[50%] right-[-600px] w-[100%] h-[50%] opacity-40 rounded-r-full"
    style={{
        background:
        "linear-gradient(73.4deg, rgba(16, 134, 144, 0.4) 3.31%, rgba(82, 190, 199, 0.4) 57.52%, rgba(252, 207, 18, 0.4) 91.12%)",
        zIndex: -1
    }}
></div>

纵向半圆形（上/下半圆） #

把高度设为宽度的2倍，然后给单侧加全圆角：

• 上半圆：用rounded-t-full，高度h-[100%]，宽度w-[50%]
• 下半圆：用rounded-b-full，高度h-[100%]，宽度w-[50%]

关键逻辑 #

半圆形的核心是宽高比为2:1（或1:2），然后只对其中一条边的两个角设置全圆角——Tailwind的rounded-[x]-full类会自动把对应角的圆角半径设为元素短边的长度，刚好能形成半圆。

内容的提问来源于stack exchange，提问作者Noor Fatima