CODEWITHSUNDEEP
htmlcssbordertab-ordering
th3pirat3
th3pirat3

Reputation: 575

CSS Chevron like element WITH border and shadows after li element

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

Requirement

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

What I have now:

Actual / Current

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

Expected / Goal

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>

Upvotes: 2

Views: 5562

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106048

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>

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29337

Here is a live demo for your need.

Just before, some notes:

  1. 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.
  2. 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)
  3. 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.

  1. I'm using the use (info) tag so you don't need to duplicate many (svg) code to each of the items.
  2. I'm using filter:drop-shadow for the shadow (obviously, info).
  3. 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

Upvotes: 2

Related Questions