How would one code this exciting design element?

How would one code this exciting design element?
0

#1

Hello fellow campers,

I have a design in which the mark up is a bit tricky and I am not 100% sure how to go about coding this up. So I ask to lend your experience:

This is the design in question:

Here is my solution. I am using CSS for the shapes but I simply can not get it like the design. Ignore the font etc.

https://jsfiddle.net/tex4rjbk/

Hoping someone can help me out here!

Cheers to all :slight_smile:


#2

To get you closer, add the following to the leftArrow CSS definition:

    position:relative;
    z-index: 1;

and the following to the rightArrow CSS definition:

    position:relative;
    z-index: 0;

The higher z-index will overlap the lower z-index value.


#3

Cheers for this but what about the widths?

Still not working for me but thanks for the help :slight_smile: