CSS Chevron like element WITH border and shadows after li element

Question

I'm trying to create Tabbed Contents with some border and shadows.

This is slightly different from on questions in that I'm trying to create shadows. Additionally, the whole area of the tab should be clickable. Basically a complex div inside an anchor tag in a li

Attempt 1 Used a square box and rotated it with two border widths visible.

What I have now:

What I am wishing to obtain when a tab is opened/active (using CSS only):

Attempt 2 Used a right pointing triangle after every li element. Positioned it just before next li element Failed at the white padding in between (that could be fixed with margin between two li) but could not find a possible solution for shadow.

Attempt 3 Positioned colored right pointed triangle after an element Positioned white triangle behind it and :before the next li element. Shadows scared me this time.

So basically the problems are the tail of next li element and the shadow of the chevron of current element.

Demo of Attempt in Stack Snippets

.my-tabs {
  width: 100%;
  margin: 10px 0 !important;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 100;
  padding-top: 10px;
}

.my-tabs li a {
  padding: 15px 20px 15px 50px;
  background: #ff5050;
  display: block;
  height: 56px;
}

.my-tabs li {
  display: block;
  width: 20%;
  font-size: 1.1em;
  margin: 0;
}

.my-tabs li:last-child:after {
  border-top: 28px solid #fff;
  border-left: 28px solid transparent;
  margin-right: 0;
  border-style: solid;
  border-right: 0;
  border-bottom: 28px solid #fff;
  content: '';
  height: 0;
  float: right;
  margin-top: -56px;
  transform: none;
  width: 0;
}

.my-tabs:after {
  border-left: 40px solid #ff5050 !important;
  margin-top: 1px;
  margin-left: -2px;
}

.my-tabs li:after {
  margin-right: -7px;
  border-style: solid;
  border-width: 4px 4px 0 0;
  border-color: white;
  content: '';
  height: 43px;
  float: right;
  margin-top: -43px;
  transform-origin: center top;
  transform: rotate(45deg);
  width: 43px;
}

.my-tabs li.active:after {
  -webkit-box-shadow: 8px 0px 4px -3px #090A09;
     -moz-box-shadow: 8px 0px 4px -3px #090A09;
       -o-box-shadow: 8px 0px 4px -3px #090A09;
          box-shadow: 8px 0px 4px -3px #090A09;
}

.my-tabs li.active {
  border-bottom: 8px solid white;
}

.my-tabs li.active a {
  -webkit-box-shadow: 0px 8px 4px -3px #090A09;
     -moz-box-shadow: 0px 8px 4px -3px #090A09;
       -o-box-shadow: 0px 8px 4px -3px #090A09;
          box-shadow: 0px 8px 4px -3px #090A09;
}

<ul class="my-tabs">
  <li id="gtab0" class=""><a href="javascript:void(0)">tab1</a></li>
  <li id="gtab1" class=""><a href="javascript:void(0)">tab2</a></li>
  <li id="gtab2" class="active"><a href="javascript:void(0)">tab3'</a></li>
  <li id="gtab3" class=""><a href="javascript:void(0)">tab4</a></li>
  <li id="gtab4" class=""><a href="javascript:void(0)">tab5</a></li>
</ul>

Have a look at **[this](http://css-shapes.xyz/progress-tracking-menu/progress-tracking-pointing-menu)** — Akshay, Nov 30 '15 at 12:38
Related to http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665. You would get some ideas. — Harry, Nov 30 '15 at 12:54

Mosh Feu · Answer 1 · 2015-12-01T11:51:06.067

Here is a live demo for your need.

Just before, some notes:

You need to wrap the text inside the arrows in div like this: <div>Tab 1</div> because the div is hide the :after element box-shadow. (To understand this, try to unwrap the div.
You need to set their z-index in descending order, so the first one hides the second and so on. (I believe that there are no many arrows so I took a guess to maximum 5)
I added a :hover transition to the box-shadow so you can see how to do this if you want.

After the talks, here is the real thing:

ul {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display:inline-block;
  background:#2980b9;
  color:#fff;
  position:relative;
  box-shadow: 0 2px 3px 0 rgba(0,0,0,0.5);
  transition:all .3s ease;
  cursor:pointer;
}

li:after {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    height: 26px;
    width: 26px;
    background: inherit;
    transform: translateY(6px) rotate(45deg);
    box-shadow: 2px 1px 3px 0 rgba(0,0,0,0.5);
    transition:all .3s ease;
}

li:nth-child(1) {
  z-index:5;
}

li:nth-child(2) {
  z-index:4;
}

li:nth-child(3) {
  z-index:3;
}

li:nth-child(4) {
  z-index:2;
}

li:nth-child(5) {
  z-index:1;
}

li:hover {
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3);
}

li:before:hover {
  box-shadow: 2px 1px 1px 0 rgba(0,0,0,0.3);
}

li.active {
  background:#c0392b;
}

li div {
  background:inherit;
  padding:10px 20px;
  position:relative;
  z-index:1;
}

<ul>
  <li><div>Tab 1</div></li>
  <li class="active"><div>Tab 2</div></li>
</ul>

http://jsbin.com/fedepe

Update The other option to create this shape is using SVG.

Just note that this is a quick and dirty solution. With svg you can't say "I can't do this". Just take this code, play with it, until you will get the exact result that you want.

I'm using the use (info) tag so you don't need to duplicate many (svg) code to each of the items.
I'm using filter:drop-shadow for the shadow (obviously, info).
You can edit this shape using apps like Adobe Illustrator or similar.

* {
  color:#fff;
}

ul {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  position: relative;
  padding: 10px 50px 10px 25px;
  float: left;
}

svg {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  z-index:-1;
  -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5)); 
  filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

use.reg {
  fill:red;
}

use.active {
  fill: blue;
}

.hidden {
  display:none;
}

li:first-child {
  z-index:1;
}

<svg class="hidden" xmlns="http://www.w3.org/2000/svg" width="148.978px" height="41.791px" viewBox="0.522 375.104 148.978 41.791">
<defs>
<g id="aa" transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)">
 <path d="M5.225-1766.523c0-2.09,81.318-2.432,590.644-2.432h590.82c0,0,298.311,205.298,298.311,209.653
  c0,4.351-292.207,204.253-292.207,205.645c0,2.266-74.014,2.612-593.789,2.612c-451.167,0-593.779-0.522-593.779-2.09"/>
</g>
</defs>
</svg>
<ul>
  <li>
    Item 1
    <svg viewBox="0.522 375.104 148.978 41.791">
       <use class="reg" xlink:href="#aa"></use>
    </svg>
  </li>
  <li>
    Item 2
    <svg viewBox="0.522 375.104 148.978 41.791">
       <use class="active" xlink:href="#aa"></use>
    </svg>
  </li>
</ul>

http://jsbin.com/texasu

Hey, thanks for demo. This was my first impression in mind about the problem. But the tail of the tabs is not similar to the one required. I think, I can use the suggestions from the similar question about arrows in CSS (using skew transform) and your solution "z-index value for all tab heads" to solve the problem — th3pirat3, Dec 01 '15 at 06:42
@th3pirat3 so maybe you can show me the exact tabs the you want and I will try to help. — Mosh Feu, Dec 01 '15 at 06:50

G-Cyrillus · Answer 2 · 2015-12-01T20:12:05.913

If you have some time to spend, you could relay on background linear gradient and rgba colors hover a single texture: demo

sample of snippet below:

.active {
  background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%
}

ul {
  background: url(http://lorempixel.com/500/52/abstract/4);
  overflow: hidden;
  border-bottom:3px solid transparent;
  padding:0 0 3px 0;
  margin:1em;
  background-clip:content-box;
}
ul:before {
  content:'';
  height:1.9em;
  display:inline-block;
  border-right:solid white;
  position:relative;
  vertical-align:top;
}


li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  min-width: 70px;
  padding: 0.25em 2em 0.25em 1.5em;
  border: 2px solid white;
  border-right: none;
  border-left: none;
}

li:before {
  content: '';
  padding: 0.7em;
  margin: -0.25em -2.75em -0.5em 2em;
  border: solid white;
  border-left: none;
  border-bottom: none;
  float: right;
  transform: rotate(45deg);
  border-radius: 2px;
  /* ? */
}

li:first-of-type {
  margin-left: -1em;
}

.active {
  background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
  box-shadow:0 2px 2px black;
}

.active:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
  box-shadow:3px 0px 2px black;
}

li:last-of-type {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%
}

li:last-of-type:before {
  background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}

li:hover {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
    box-shadow:0px 2px 2px black;
}

li:hover:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
    box-shadow:3px 0px 2px black;
}
a {
  color:#12374B;
  font-weight:bold;
  text-shadow:0 0 1px white;
  font-variant:small-caps;
}
body {
  background:#777;
}

<ul>
  <li class="active"><a href="">Qualify</a></li><li>
  <a href="">Develop</a></li><li>
  <a href="">Propose</a></li><li class="active">
  <a href="">Qualify</a></li><li>
  <a href="">Close</a></li>
</ul>

with nav + a

nav {
  background: url(http://lorempixel.com/500/52/abstract/4);
  overflow: hidden;
  border-bottom:3px solid transparent;
  padding:0 0 3px 0;
  margin:1em;
  background-clip:content-box;
  white-space:nowrap; /* keep it on a single line */
}
nav:before {
  content:'';
  height:1.9em;
  display:inline-block;
  border-right:solid white;
  position:relative;
  vertical-align:top;
}


a {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  min-width: 70px;
  padding: 0.25em 2em 0.25em 1.5em;
  border: 2px solid white;
  border-right: none;
  border-left: none;
}

a:before {
  content: '';
  padding: 0.7em;
  margin: -0.25em -2.75em -0.5em 2em;
  border: solid white;
  border-left: none;
  border-bottom: none;
  float: right;
  transform: rotate(45deg);
  border-radius: 2px;
  /* ? */
}

a:first-of-type {
  margin-left: -1em;
}

.active {
  background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
  box-shadow:0 2px 2px black;
}

.active:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
  box-shadow:3px 0px 2px black;
}

a:last-of-type {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%
}

a:last-of-type:before {
  background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}

a:hover {
  background: linear-gradient(-310deg,transparent 0.75em,  rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
  background-size: 100% 50%, 100% 50%;
    box-shadow:0px 2px 2px black;
}

a:hover:before {
  background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
    box-shadow:3px 0px 2px black;
}
a {
  color:#12374B;
  font-weight:bold;
  text-shadow:0 0 1px white;
  font-variant:small-caps;
}
body {
  background:#777;
}

<nav>
  <a href="" class="active">Qualify</a><!-- white space can be killed here or else where if this method is not apprpriate to your coding
  --><a href="">Develop</a><!--
  --><a href="">Propose</a><!--
  --><a href="" class="active">Qualify</a><!--
  --><a href="">Close</a>
  </nav>

using gradients solved it a bit. But now the anchor tags need some complex padding settings so that clicking on any part of li element triggers the tab. — th3pirat3, Dec 01 '15 at 06:40
@th3pirat3 then re-use CSS just for (it is only styling, no matter the tags actually) and you may even just use a
tag. For the shape , you can indeed skew the pseudo and reset degre value for the linear gradient. mind using px or em (or one single units) for font size, padding, margin, gradient, pseudo size, ... to make sure it doesn't break if different font used for instance. I edited questio with a second snippet with nav and a tags only. hope you find it usefull — G-Cyrillus, Dec 01 '15 at 20:11

CSS Chevron like element WITH border and shadows after li element

Demo of Attempt in Stack Snippets

2 Answers2