reactjs - Is there a way to make negative border-radius in tailwindcss? - Stack Overflow

admin管理员组

文章数量:1355542

I want to create a "header-menu" when selected has the effect and the border-radius (all effect I have done but bottom border radius).

Here is my code of that part:

w-[full] h-[60px] relative 
flex flex-row items-center justify-center 
pt-[17px] pb-[17px] px-[28px] 
box-border gap-2.5 text-left text-[18px] 
leading-[30px] font-semibold bg-white text-[#0A98E7] 
rounded-t-[10px] rounded-b-[10px] 
-mb-[5px] z-10 border-t border-l border-r border-white 
whitespace-nowrap 

the result of code above

I expecting the result look as shown in this screenshot:

enter image description here

I want to create a "header-menu" when selected has the effect and the border-radius (all effect I have done but bottom border radius).

Here is my code of that part:

w-[full] h-[60px] relative 
flex flex-row items-center justify-center 
pt-[17px] pb-[17px] px-[28px] 
box-border gap-2.5 text-left text-[18px] 
leading-[30px] font-semibold bg-white text-[#0A98E7] 
rounded-t-[10px] rounded-b-[10px] 
-mb-[5px] z-10 border-t border-l border-r border-white 
whitespace-nowrap 

the result of code above

I expecting the result look as shown in this screenshot:

enter image description here

• reactjs
• tailwind-css
• border-radius

Share Improve this question Follow edited Mar 28 at 8:27 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Mar 28 at 7:38 Joshua JohanJoshua Johan 322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

First, remove the bottom border radius and borders. We need to implement the bottom border in a completely different way to the top border radii. The borders are supurfluous.

<script src="https://cdn.jsdelivr/npm/@tailwindcss/[email protected]"></script>

<div class="bg-sky-600 pt-10">
  <div class="w-fit mx-auto">
    <div class="w-[full] h-[60px] relative flex flex-row items-center justify-center pt-[17px] pb-[17px] px-[28px] box-border gap-2.5 text-left text-[18px] leading-[30px] font-semibold bg-white text-[#0A98E7] rounded-t-[10px] -mb-[5px] z-10 whitespace-nowrap">
      Manager
    </div>
  </div>
</div>

Use SVGs for the bottom border radii, for each corner. We size them as the same as the top border radii, and with the same color as the background color. To keep things DRY, we use CSS variables to track the value for these. This means the values stay linked. This means if you need to change either the background color or the radii, you only need to change it in one place.

<script src="https://cdn.jsdelivr/npm/@tailwindcss/[email protected]"></script>

<div class="bg-sky-600 pt-10">
  <div class="w-fit mx-auto">
    <div class="relative w-[full] h-[60px] relative flex flex-row items-center justify-center pt-[17px] pb-[17px] px-[28px] box-border gap-2.5 text-left text-[18px] leading-[30px] font-semibold bg-(--bg) text-[#0A98E7] rounded-t-(--radius) -mb-[5px] z-10 whitespace-nowrap [--radius:10px] [--bg:var(--color-white)]">
      Manager
      <svg viewBox="0 0 10 10" class="absolute right-full bottom-0 size-(--radius) fill-(--bg)" aria-hidden="true">
        <path d="M0 10A10 10 0 0 0 10 0v10z"/>
      </svg>
      <svg viewBox="0 0 10 10" class="absolute left-full bottom-0 size-(--radius) fill-(--bg)" aria-hidden="true">
        <path d="M0 0A10 10 0 0 0 10 10H0z"/>
      </svg>
    </div>
  </div>
</div>

本文标签： reactjsIs there a way to make negative borderradius in tailwindcssStack Overflow