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
30 Replies
you can rotate it on the x-axis and use perspective property and
transform-style:preserve-3d;something like this?
Exactly!
While the children will be rotated the opposite direction.
I know the perspective usually goes on the parent though
Yupp
ahh
wait i'll try that
seems like you wont need preserve-3d
i am really bad at 3d transforms. but it does not seem to have any effect with transform-style:preserve-3d;
workedddd
Yaay š
Awesome!
now just need to rotate the children right?
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
it isn't working for some reason
@tok124 (CSS Nerd) @eioluseyi
š„²
what exactly is not working? to reverse rotation on children?
negative rotation
it does rotate when i do positive rotation but doesnt work with negative value
Hmm.... Hold on, i will try myself š
@IsrarYeah okay... so turns out you need the transform-style after all...
ahhhhh
But they clip through the card as i thought
So just use translate š
Works perfectly fine š
damn works
Wohoooo š
thanksssss mannnnnnn
No problem š
ā¤ļøā¤ļøā¤ļø
looks good now
