Clipped Hero Image

To get away from stacked rectangular blocks, the page uses hero images with the top and bottom clipped to create a diagonal layout.
The image is inserted in a rectangular container and has its top and bottom edges clipped using an SVG with polygon points and a clipPath.
The angle of the top and bottom edges is adjusted using sliders. The amount of clip varies from zero to 50 on the top and 50 to 100 on the bottom.
Setting both sliders to their maximum will create a triangle.
Images
The images are inserted in two sizes - one for wider wcreens and the other for mobile devices. The quality doesn't need to be top notch so the images used here were cropped to 1200px and 800px wide respectively before importing into EverWeb.
Slideshow
The same effect can be applied to a slideshow. Follow the link below to see a lazy loading slider with captions and link options …