Wow, I hadn’t seen the CSS hexagon - crazy cool @PixelGeek! @aerismel, you could also use a .png image (as an alternative) for any shaped image with a transparent background. Just in case you want to create something that isn’t doable with a CSS method.
For the diagonal layered element, I would use the skew property on the Webflow designer:
Then it would consist on two main elements with height:100% the image aligned to the left and the skewed element to the right probably with float:left/right. To the skewed element I would either make it position:absolute or/and play with a negative margin-left until it would covered enough part of the image.
I would apply a gradient to the skewed element all using Webflow without images nor external code.
The tool mentioned earlier would be very useful to create the hexagons.