Search code examples
csscss-transformscss-shapes

How to Transform CSS only top left shapes of div


I have a design that must be reshaped like the image below without having to change the letters such as using "transform: skew", because it will change the shape of the existing letters.

enter image description here

I dont know the name of this shapes and trying to search but the solution using skew or border transparent, and i trying by myself but the result not like what i want, please help.


Solution

  • I got the answer from @JamesAllan using clip-path like this

    clip-path: polygon(0 21%, 100% 2%, 100% 100%, 0% 100%);
    

    and this web Bennettfeely help me so much to make other shapes, thank you so much.