Background clip-path
SantosGuillamot opened this issue · comments
Description
Some sections of the web, instead of having a rectangular background, they will use a parallelogram. We will configure one by default and if some sections need to customize it they'll take care of that themselves.
Logic
Our first approach would be to use a class named has-polygon-background in the <div> tags where we want to apply the clip-path. The default css style added should be something similar to:
clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 calc(100% - 72px));
Where to check
- Invision About Us -> Our mission.
/common-styles/page -> Section with polygon background.