Separate content panels with caret and drop shadow

[robkeim]

Hello,

I’m trying to separate two content panels on a page with a caret and drop shadow. The top panel is an image and the caret is to provide a visual cue for users to scroll to see more content.

Here’s a mock-up of what I’m trying to achieve:

I’ve been able to get the image to show with a caret by adding extra elements as you can see in a CodePen below, but I wasn’t able to get the drop shadow.
https://codepen.io/anon/pen/EvgwWQ

Another approach for the caret is using pseudo elements and transforms but I didn’t go with that approach because it’s not supported in IE9 which I’m required to support.

Any ideas on how to make this work would be greatly appreciated!

Thanks,
Rob

[Atelierbram]

I would try something with a polygon clip-path, for a nice helper tool search for: “CSS clip-path maker Bennett Feely Clippy”

I started something here:

https://codepen.io/atelierbram/pen/oeYZbL

… I have no time right now to finish the shadow of the caret, which is obviously the trickiest part.

[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

[Atelierbram]

I just read about the IE support in the question, … caniuse.com/#search=clip-path … seems to be not supported at all in any version of IE so yeah … out of luck there

[robkeim]

Hello @Atelierbram,

I really like your clip-path solution thanks for taking the time to put it together, it’s very simple and elegant.

Unfortunately, as you mentioned in your last post that still puts me out of luck on the IE front, but I could potentially have a non-drop shadow version for IE if it turns out there is no cross browser way of doing it.

[Author]

Posts