Docs

[Joce]

Hi there,

I would like to create a polygon shape such as the websites below :

https://outlook.live.com/owa/ –> for example between the blue and grey

or like that one https://envoy.com –> between the white and snow color.

I browsed internet but i did’t find anything…

You maybe could help me.

regards

[Friech]

Hi There,

Thanks for writing in! You can use the transform: skewY css property on the STYLE field of your section.

-webkit-transform: skewY(8deg); transform: skewY(8deg);

Hope it helps, Cheers!

[Joce]

Thanks, but my problem is that all my shape on xtheme is a polygon 🙂
CF attached file

[Joao]

Hi There,

Please provide a screenshot of what you are trying to achieve and provide more details about your goals.

Also please provide your URL

Thanks

[Joce]

Hi,

thanks for you answer.
Please find a screenshot of what I would like.
I’m trying to create a shape something like a polygon between 2 sections (between the blue and the grey on my example).

Basically, I try to have the same thing as Outlook website :

https://outlook.live.com/owa/

Let me know if you need more details,

PS : Unfortunately, i cannot provide a URL i work on a local server.

Thanks

Regards

[Christopher]

Hey there,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Joce]

Hi;

Thanks for your answer. I’ll try to find.

Regards

[Christian]

You’re welcome.

[Joce]

In case if someone search the same thing the solution is here : https://xthemeusers.com/resources/useful-links/

polygon shape such as the websites below :
https://outlook.live.com/owa/
UPDATE – SOLVED with the solution below :
1. It doesn’t require an additional Section
2. It doesn’t require installing additional plugins
3. No Javascript or other code
4. No creation of custom SVG files, and no need to upload anything.
It is just few lines of CSS, and it even can be added only to the page where needed, through Cornerstone CSS editor.
Here is the CSS:
/* Skew a section */
.skew-box {
-moz-transform: skewY(-2.5deg);
-ms-transform: skewY(-2.5deg);
-o-transform: skewY(-2.5deg);
-webkit-transform: skewY(-2.5deg);
transform: skewY(-2.5deg);
margin:-2% 0!important;
}
.skew-box> *{
-moz-transform: skewY(2.5deg);
-ms-transform: skewY(2.5deg);
-o-transform: skewY(2.5deg);
-webkit-transform: skewY(2.5deg);
transform: skewY(2.5deg);
}
And here is the explanation:
“Add class skew-box to the section, and place the CSS in the Cornerstone CSS editor if you use it only on one page, or place it in the Child theme’s style.css if you use it site-wide.
This method targets all direct children of the section (rows) to revert them back. Check if margin 2% needs adjusting in your case.
Note that lines may look jagged when skewed. To avoid this, add a border the same color as the neighboring section above and below the skewed section, like this; border-top: 1px solid white; border-bottom: 1px solid white; (add the borders to the style-box of the skewed section, or in the code snippet above).

[Rad]

Thanks for sharing! This will be helpful 🙂

[Author]

Posts