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:
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)
andoverflow: hidden
on the parent to hide the skewed area on the left side. - Other uses a
rotateX
transform with a bit ofperspective
to produce the skewed/angled side. Thetransform-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
How to Change the Color of the Scrollbar for Microsoft Edge
How Do Ligature Icons Work in Material Icons
Chrome 83: Change Colors of New Form Styling
CSS Positioning to Fill Container: Width VS. Left/Right
How to Change Color of Bootstrap Progress Bar with Custom Color
CSS to Change the Cursor Style of the Resize Button on a Textarea
@Page :First { Margin: ... } in Chrome Bug
How to Modify the Strongloop's Loopback Explorer CSS
Show :After When Hovering Over the Parent Element via CSS
Span Background-Color & Padding Problems
How to Make Half-Square Background in CSS
How to Output Errors When Using .Less Programmatically
Google Maps Autocomplete, Fix to the Input
Unwanted Outline on Border When Parent Is Transformed
What's the CSS Filter Alternative for Firefox
Mobile Orientation Change Not Applying CSS
Chrome's Hidden CSS Scroll-Snap Threshold and How to Change It