CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Diagonal Hero

Hero section variation with diagonal edges.

Copy: View demo


All components are built upon the CodyHouse Framework.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Diagonal Hero component is a variation of the hero component: the background is skewed in order to create diagonal edges.

The effect is created with the help of the clip-path property, applied to the &::before pseudo-element of the .hero section.

🌄Image credits:

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.