如何用顺风创建半圆

Question

我正在尝试用顺风创建一个半圆，但除了这个我似乎找不到其他方法。

<div className="relative  ">
  <div className="bg-black h-36 w-36 rounded-full absolute top-[50px] left-[555px] "></div>
  <div className="bg-white h-24 w-36 absolute top-[110px] left-[555px]   "></div>
</div>

你知道有没有更好的方法因为这感觉有点不对劲，我觉得还有其他更好的方法

Answer 1

有一种方法可以使用 rounded-tr 和 rounded-tl 这是您需要做的：

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative flex justify-center items-center h-screen w-screen">

<div class="h-12 w-24 bg-indigo-500 
            rounded-tl-full rounded-tr-full "></div>
</div>

如何用顺风创建半圆

How to create semi circle with tailwind

tailwind-css

tailwind-in-js

tailwind-ui

tailwind-3