I will like to make my tab look like this image below:
But I'm not able to draw this. I have gone to W3Schools and looked at several tutorials online but cannot draw this. I have even played around with the pseudo elements such as ::before and ::after but still no luck. Each selection will produce a page.
The design that you are looking for is similar to the one described in this answer of mine. I am posting a separate answer because what you need is a bit more complex than that one due to the presence of gradient background, overlapping triangular areas (on the next item) and box-shadow etc.
The approach used is similar to that answer in the sense that two pseudo-elements are added to each li element and they are skewed in the opposite directions to achieve the effect. The below are some of the additional steps that were done for your design:
:after) is added to the ul and a gradient that goes from semi-transparent white to transparent and then to a semi-transparent black is set as its background image. Size of this pseudo-element is lesser than the parent ul container and this produces the gradient effect.z-index are assigned to each li element to bring the earlier element forward and have its triangular bit be above the next element.box-shadow and border-right are added to the li:before and li:after elements to get the arrow and its shadow.box-shadow are added around the ul.The output is responsive as you can see in the "full page view" of the snippet.
ul {
position: relative;
margin: 0;
padding: 0;
line-height: 60px;
color: white;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border: 2px solid white;
border-radius: 30px;
list-style-type: none;
box-shadow: 2px 2px 0px #DDD, -2px 2px 0px #DDD;
white-space: nowrap;
overflow: hidden;
}
li {
position: relative;
display: inline-block;
width: 33.33%;
text-indent: -20px;
}
li:before,
li:after {
position: absolute;
left: 0;
content: '';
height: 50%;
width: 100%;
background: rgb(31, 139, 188);
border-right: 3px solid rgb(87, 153, 190);
box-shadow: 3px -2px 2px rgba(0, 0, 0, 0.15);
}
li:first-child:before,
li:first-child:after {
background: rgb(255, 0, 0);
}
li:before {
top: 0px;
transform: skewX(45deg);
transform-origin: left bottom;
z-index: -1;
}
li:after {
bottom: 0px;
transform: skewX(-45deg);
transform-origin: left top;
z-index: -2;
}
li:first-child {
text-indent: 0px;
z-index: 2;
}
li:nth-of-type(2) {
z-index: 1;
}
li:last-child {
width: calc(33.33% + 15px);
}
ul:after {
position: absolute;
content: '';
top: 3px;
left: 3px;
height: calc(100% - 6px);
width: calc(100% - 6px);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05));
border-radius: 25px;
z-index: 3;
pointer-events: none;
}
/* if you need hover effects */
li:hover:before,
li:hover:after {
background: yellowgreen;
}<ul>
<li>Text</li
><li>Text</li
><li>Text</li>
<!-- > is added in next line intentionally to avoid space between inline block elements -->
</ul>You could also relay on a nav bar and flex.
codepen to play with or snippet below to run
nav {
display: flex;
/* basicly to help to easily spread evenly childs (float, inline-block, table, .. works too ) */
overflow: hidden;
/*might be usefull to hide links not rounded and last arrow */
background: #0077AF;
font-size: 1.8vw; /* 2em;*/
/* vw used for demo , i do not advise this without mediaqueries to control max and min font-size */
padding: 0;
/* reset */
margin: 0.5em 15px;
/* whatever */
border-radius: 2em;
/* image was rounded */
box-shadow: 0 0 0 3px white, 0 0 8px;
/* draw border and shadow */
position: relative;
/* will be used for the web 2.0 glossy thing */
}
nav:before {
/* the glossy thing */
content: '';
/* trigger pseudo */
position: absolute;
/* off flow so to stick where needed */
z-index: 2;
/* on top */
pointer-events: none;
/* click through */
border-radius: 2.5em;
/* increase border-radius because smaller than parent */
top: 5px;
left: 10px;
right: 10px;
bottom: 0;
box-shadow: 0 -15px 18px -8px rgba(255, 255, 255, 0.5);
/* fade outside */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65), transparent, transparent 80%);
/* glossy effect drawn */
filter: blur(3px);
/* increase a bit the blur/glossy effect, optionnal */
}
a {
flex: 1;
/* fill parent and share room according to amount */
background: inherit;
/* will be needed to blend with pseudo later */
color: white;
letter-spacing: 1px;
text-decoration: none;
min-width: 14em;
text-align: center;
font-family: 'Oswald', sans-serif;
/* looked close to your font-family */
text-shadow: 2px 2px 2px #222;
padding: 1em;
margin-right: -.8em;
/* will hide arrow on last element */
overflow: hidden;
position: relative;
/* set this to stick arrow shape */
overflow: visible;
/* let arrow show even if outside parent */
}
a:first-of-type {
margin-left: -1em;
/* optionnal */
}
a:after {
/* the right arrow shape */
content: '';
position: absolute;
padding: 1.5em;
box-shadow: 3px -3px 3px rgba(255, 255, 255, 0.5), 5px -5px 6px -1px rgba(0, 0, 0, 0.5);
transform: rotate(45deg);
right: -1em;
/* move outside the square shape */
top: 0.25em;
/* tune this if vertcal padding or line-height is reset or change */
background: inherit;
/* to blend with parent */
z-index: 1;
/* stands on top but under the glossy thing */
}
/* background colors can be modified */
.done {
background: #FC0000;
}
a:hover {
background: #DDA265;
}
img {
display: block;
width: 100%;
/* for the show to compare to html/css render */
}<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<p>CSS version & hover :</p>
<nav> <a href="#" class="done"> SIZE & CRUST </a>
<a href="#"> CHEEZE & SAUCE </a>
<a href="#"> TOPPINGS </a>
</nav>
<p>image version :
<img src="https://i.stack.imgur.com/ebD59.png" />
</p>