Как создать полукруг с попутным ветром

Я пытаюсь создать полукруг с попутным ветром, но не могу найти другого способа, кроме этого.

<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>

Вы знаете, есть ли лучший способ, потому что это немного не так, я чувствую, что есть другие лучшие способы сделать это

tailwind-css tailwind-ui tailwind-in-js tailwind-3

20.03.2022 17:03

Ускоренная стилизация компонентов React Native с помощью NativeWind

Как сделать компонент справочного центра с помощью TailwindCSS

Справочный центр - это веб-сайт, где клиенты могут найти ответы на свои вопросы и решения своих проблем. Созданный для решения многих распространенных...

REACT и NEXT JS вместе с Tailwind CSS

Наличие собственного или персонального сайта необходимо в современном мире, а сочетание React и Next JS позволяет разработчику сделать это за меньшее...

Современные подходы к организации и работе с CSS в проекте

Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.

Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Вау, спасибо, приятель, это буквально то, что я искал, спасибо

— 21.03.2022 11:19

@AbelKibebe, рад помочь! счастливое кодирование.

— 21.03.2022 12:36

20.03.2022 22:01