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>
No description
No description
10 Replies
majkl
majkl•8mo ago
"<div className="? And those class names...?
cold
cold•8mo ago
?
majkl
majkl•8mo ago
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).
cold
cold•8mo ago
My guy this is jsx and tailwindcss not html
majkl
majkl•8mo ago
Yes, I though it may be. Is this a common thing rebdered correctly?
cold
cold•8mo ago
Not sure what you mean by that
Jochem
Jochem•8mo ago
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
cold
cold•8mo ago
Managed to make this, but no idea how to round it off at the top tbh
No description
majkl
majkl•8mo ago
Mkay, sorrry then.
Kevin Powell
Kevin Powell•8mo ago
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
Want results from more Discord servers?
Add your server