How to Make Angled Tab Like This Using CSS

How to create slanted tabs with a border in CSS?

You can try this approach: jsFiddle

Instead of using the borders to create the slanted effect, I'm using an :after pseudo element to create it. This allows me to set borders around it. Then I'm using a :before pseudo element to hide the borders which I don't want to see. The recurring 2px in the CSS is derived from the border width value.

CSS

.tab:before {
height: 50px;
width: 10px;
display: block;
content:" ";
background-color: #FFF;
position: absolute;
right: -2px;
top: -2px;
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
.tab {
height: 50px;
width: 150px;
border-radius: 10px 10px 0px 0px;
background-color: #FFF;
position: relative;
border: 2px solid blue;
}
.tab:after {
display: block;
content:" ";
width: 100px;
height: 50px;
top: -2px;
background-color: #FFF;
position: absolute;
right: -29px;
transform:skewX(45deg);
-ms-transform:skewX(45deg);
-webkit-transform:skewX(45deg);
border: 2px solid blue;
z-index: -1;
}

Pure CSS Angled/Rounded Tab

"I'm looking to achieve this shape of a "tab" in the best way possible" - Use svg.



<svg width="100%" height="84" viewBox="0 0 700 84" preserveAspectRatio="none">

<path d="M0,0 h700 v30 h-280 c-60,0 -60,15 -100,30 c-10,4 -15,5 -35,6 h-285" fill="#008882" />

</svg>

how to slant and overlap a tab in Css?

You can do something like this:

$('.tile').prepend('<div class="tr"></div>')

.prepend('<div class="tl"></div>')
.tile {

position: relative;

margin: 10px;

width: 200px;

height: 15px;

padding: 20px;

background-color: #ccc;

text-align: center;

}

.tile .tl, .tile .tr,

.tile .bl, .tile .br {

width: 0;

height: 0;

position: absolute;

}

.tile .tl {

top: 0;

left: 0;

border-top: 60px solid white;

border-right: 20px solid transparent;

}

.tile .tr {

top: 0;

right: 0;

border-top: 60px solid white;

border-left: 20px solid transparent;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tile">

Hello world!

</div>

Styling Tabs With Right Angle Bracket

We can achieve that easily by using the ::after and ::before pseudo element.

I used div elements instead of li so we can have more control when designing.

Here's an example:

#progressbar {
height: 40px;
width: 100%;
overflow: hidden;
border: 4px solid black;

display: flex;
align-items: center;
justify-content: space-between;
}

#progressbar div {
padding-left: 4px;
height: 100%;
width: 100%;
text-align: center;
background-color: white;
position: relative;
display: inline-block;
color: crimson;
}

#progressbar div:not(:first-child) {
margin-left: 24px;
}

#progressbar div.active {
background-color: lightcoral;
}

#progressbar div:not(:last-child)::before,
#progressbar div:not(:last-child)::after {
content: '';
position: absolute;
}

#progressbar .acitive:not(:last-child)::before {
background-color: lightcoral;
}

#progressbar div.active:not(:last-child)::before {
background-color: lightcoral;
}

#progressbar div:not(:last-child)::before {
right: -13.5px;
top: -1px;
height: inherit;
width: 30px;
border: 4px solid black;
transform: rotate(45deg);
z-index: -1;
}

#progressbar div:not(:last-child)::after {
top: 0px;
right: 0;
height: inherit;
width: 80%;
background-color: inherit;
z-index: -1;
}
<div id="progressbar">
<div class="active" id="Details"><strong>Details&BioData</strong></div>
<div id="Educational"><strong>Educational Qualification</strong></div>
<div id="Attachement"><strong>Attachement Of Forms</strong></div>
<div id="Training Details"><strong>Training Details</strong></div>
<div id="Confirmation"><strong>Confirmation</strong></div>
</div>

How do I make an angled tab interface with just jquery and css3?

This tuts will get you going but I'll try to mockup something in a minute!

http://www.howtocreate.co.uk/tutorials/css/slopes

http://net.tutsplus.com/articles/news/fun-with-css-shapes/

BTW great question!

Edit:

Here is the "final" result:

alt text

See it here!

NOTE:

Just be aware that this is a "hack" and that it might not be the best idea to actually implement it, I think (can't try it now) IE has some issues with this, if you asked about usability and accessibility, I would say go with images :)

Responsive Slanted Tabs

Flex is indeed the way to go (display:table/table-cell for older browsers)

For the slanted corners, you may use border or linear bg gradients.

.slant-tabs {

border: solid 2px black;

}

.nav {

display: flex;

overflow: hidden;

}

.slant-tabs li {

flex: 1;

position: relative;

float: left;

background: #cccccc;

padding-bottom: 0px

}

a:before,

a:after {

height: 45px;

width: 45px;

z-index: 0;

}

.slant-tabs li a:before {

content: '';

position: absolute;

right: 100%;

top: 0;

background: linear-gradient(-45deg, #ccc calc(50% - 2px), transparent calc(50% - 2px));

}

.slant-tabs li:not(:last-child) {

margin-right: 45px;

}

.slant-tabs li a:after {

content: '';

position: absolute;

left: 100%;

top: 0;

background: linear-gradient( 135deg, #ccc calc(50% - 2px), transparent calc(50% - 2px));

z-index: 1

}

.slant-tabs li a {

text-decoration: none;

line-height: 40px;

padding: 0 8px !important;

}

.slant-tabs li a:hover {

background-color: #cccccc;

color: gray!important

}

.slant-tabs li a:hover:before {

background: linear-gradient( -45deg, #f2f2f2 calc(50% - 2px), transparent calc(50% - 2px));

}

.slant-tabs li a:hover:after {

background: linear-gradient( 135deg, #f2f2f2 calc(50% - 2px), transparent calc(50% - 2px));

}

.slant-tabs li.active a {

background-color: #cccccc;

color: #fff;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

<div class="slant-tabs">

<ul class="nav">

<li class="active">

<a href="#description" data-toggle="tab">

<span>Description</span>

</a>

</li>

<li>

<a href="#specification" data-toggle="tab">

<span>Specification</span>

</a>

</li>

<li>

<a href="#avail" data-toggle="tab">

<span>Availacoes</span>

</a>

</li>

</ul>

<div class="tab-content clearfix">

<div class="tab-pane active" id="description">

<h3>Content's background color is the same for the tab</h3>

</div>

<div class="tab-pane" id="specification">

<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab

</h3>

</div>

<div class="tab-pane" id="avail">

<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>

</div>

</div>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Creating a Tab shape with CSS or SVG

Here is an alternate approach using CSS3 transforms for achieving the required shape. Like the SVG answer, this method can also be used when the background (behind the shape) is not a solid color.

The snippet has two samples and

  • One uses transform: skew(45deg) and overflow: hidden on the parent to hide the skewed area on the left side.
  • Other uses a rotateX transform with a bit of perspective to produce the skewed/angled side. The transform-origin setting means that only one side is angled.



div.a {

position: relative;

height: 70px;

width: 250px;

margin-top: 20px;

padding: 24px 4px 0px;

overflow: hidden;

}

div.a:before {

position: absolute;

content: '';

top: 20px;

left: 0px;

width: 100%;

height: 50px;

background: #c94935;

z-index: -1;

}

div.a:after {

position: absolute;

content: '';

top: 0px;

left: -20px;

width: 60%;

-webkit-transform: skew(45deg);

-moz-transform: skew(45deg);

transform: skew(45deg);

height: 20px;

background: #c94935;

z-index: -1;

}

div.b {

position: relative;

height: 50px;

width: 250px;

padding: 4px 4px 0px;

margin-top: 40px;

background: #c94935;

}

div.b:before {

position: absolute;

content: '';

top: -20px;

left: 0px;

width: 50%;

height: 20px;

-webkit-transform-origin: left top;

-moz-transform-origin: left top;

transform-origin: left top;

-webkit-transform: perspective(10px) rotateX(5deg);

-moz-transform: perspective(10px) rotateX(5deg);

transform: perspective(10px) rotateX(5deg);

background: #c94935;

}

body {

background: url(http://lorempixel.com/500/500);

}
<div class="a">

Lorem Ipsum Dolor Sit Amet...

</div>

<div class="b">

Lorem Ipsum Dolor Sit Amet...

</div>

Creating a angled shape with CSS3

Rather than using skew and rotate on the container itself, you can use an ::after rule to create an empty div to rotate.

jsfiddle here: http://jsfiddle.net/carasin/ndb1koca/1/

html:

<div id="banner-wrap">
<div id="banner"><h1>Text here</h1></div>
</div>

css:

#banner-wrap {
position:relative;
}
#banner::after {
content: "";
display:block;
background: orange;
width:200%;
height:500px;
position:absolute;
left:-30%;
top:-60%;
z-index:0;
transform: rotate(13deg);
}
h1 {
font-family:sans-serif;
color:#fff;
text-transform:uppercase;
font-size:3em;
z-index:1;
position:relative;
padding:40px 30px ;
}


Related Topics



Leave a reply



Submit