Angled border radius?
Hi, I am trying to recreate something, and am struggling to recreate the corner. They just did it with an svg, but I wanna do it with divs. How can I create the round corner thingy?
Current code (TSX & TWC):
<div className="w-4/6 h-[calc(100vh-14rem)] ml-28 flex flex-col items-end">
<div className="bg-[#3827c8] h-14 w-96 rounded-t-[3rem]"></div>
<div className="bg-[#3827c8] h-[calc(100%-3.5rem)] w-full rounded-l-[3rem] rounded-b-[3rem]"></div>
</div>
10 Replies
"<div className="? And those class names...?
?
For starters, "<div className>" is nonsense in html. Classes "bg-[#3827c8] h-14 w-96 rounded-t-[3rem]" looks as a wildnonsense too (even if special characters are accepted).
My guy this is jsx and tailwindcss not html
Yes, I though it may be. Is this a common thing rebdered correctly?
Not sure what you mean by that
className is proper jsx yeah
it's probably a good idea to create a tailwind playground for this, or something like codepen. Easier for others to help then
Managed to make this, but no idea how to round it off at the top tbh
Mkay, sorrry then.
A tailwind playground link woud help, like Jochem said... like, right now you have that, but we don't know how you got to that, so it's hard to help 😅
It looks like you have three divs (the parent and two children). I'd have the lighter blue child that's sticking out the top have a specific width on it, and just give it a border-radius on the top.
also, instead of three divs, I'd only use one, and then have the other two as pseudo-elements.
empty divs just for decorative elements might as well jsut be a pseudo-element