CSS Chevron like element WITH border and shadows after li element - html

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="">tab1</li>
<li id="gtab1" class="">tab2</li>
<li id="gtab2" class="active">tab3'</li>
<li id="gtab3" class="">tab4</li>
<li id="gtab4" class="">tab5</li>
</ul>

Answer 1

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

Answer 2

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