How can i create this shape with css

I've tried skew, I've tried clip-path the issue is with clip path i cant retain the border-radius and for some reason it also losses the shadow
No description
30 Replies
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
you can rotate it on the x-axis and use perspective property and transform-style:preserve-3d;
Israr
Israrā€¢9mo ago
something like this?
No description
EIO
EIOā€¢9mo ago
Exactly! While the children will be rotated the opposite direction. I know the perspective usually goes on the parent though
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
Yupp
Israr
Israrā€¢9mo ago
ahh wait i'll try that
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
seems like you wont need preserve-3d
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
i am really bad at 3d transforms. but it does not seem to have any effect with transform-style:preserve-3d;
Israr
Israrā€¢9mo ago
No description
Israr
Israrā€¢9mo ago
workedddd
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
Yaay šŸ˜„
EIO
EIOā€¢9mo ago
Awesome!
Israr
Israrā€¢9mo ago
now just need to rotate the children right?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
yeah ! If the text goes below the card, you can use translate on the children to move them on the z-axis Not sure if that will happen tho... But if it does
Israr
Israrā€¢9mo ago
it isn't working for some reason @tok124 (CSS Nerd) @eioluseyi šŸ„²
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
what exactly is not working? to reverse rotation on children?
Israr
Israrā€¢9mo ago
negative rotation it does rotate when i do positive rotation but doesnt work with negative value
Israr
Israrā€¢9mo ago
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
Hmm.... Hold on, i will try myself šŸ™‚ @IsrarYeah okay... so turns out you need the transform-style after all...
Israr
Israrā€¢9mo ago
ahhhhh
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
But they clip through the card as i thought
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
So just use translate šŸ™‚
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
Works perfectly fine šŸ™‚
No description
Israr
Israrā€¢9mo ago
damn works
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
Wohoooo šŸ˜„
Israr
Israrā€¢9mo ago
thanksssss mannnnnnn
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)ā€¢9mo ago
No problem šŸ™‚
Israr
Israrā€¢9mo ago
ā¤ļøā¤ļøā¤ļø
Israr
Israrā€¢9mo ago
looks good now
No description
Want results from more Discord servers?
Add your server