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
Share Improve this question edited Mar 28 at 8:27 marc_s 756k184 gold badges1.4k silver badges1.5k bronze badges asked Mar 28 at 7:38 Joshua JohanJoshua Johan 32 bronze badges1 Answer
Reset to default 1First, 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>