Reply To: Separate content panels with caret and drop shadow

[Atelierbram]

@robkeim I updated the demo (see above) with some crucial edits. Note how the top-section now always keeps an aspect-ratio of 4:1 This helps with keeping the caret in shape with the exact same angle, but also helps with keeping the CSS DRY[1] (without having to change this css clip-path polygon in media-queries a few times over, using “magical numbers”).

This is done in CSS with the so-called padding-bottom trick:

.top-section {
  position: relative;
  height: 0;
  padding-bottom: 25%;
}

Also note how the source order has changed to allow the “shadow” to be on top of the image (to prevent being obscured by it), and visually undone with vertical transform: translateY().

I am sure the shadow can be done better, here it is an embedded SVG in the CSS, but it might as well be just a png image.

1. don’t repeat yourself