How to create slanted tabs with a border in CSS?
19,821
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;
}
Related videos on Youtube
Author by
alias51
Updated on October 06, 2022Comments
-
alias51 over 1 year
I am trying to create angled tabs to sit above a content section, and came across this great example:
HTML:
<div class="tab"> <div class="arrow"></div> </div>
CSS:
body { background-color: #666; } .tab { height: 50px; width: 150px; border-radius: 10px 10px 0px 0px; background-color: #FFF; position: relative; } .arrow { border-color: transparent transparent #FFF #FFF; border-style: solid; border-width: 23px 23px 23px 23px; height:0; width:0; position:absolute; bottom:0px; right:-43px; }
However, I would like to set a different 2px border colour to this shape, and unfortunately this method doesn't work as it uses the border to create the right hand side of the shape.
Any ideas on how I could mod it?
-
Andrea Ligios almost 11 years+1. This is similar to my technique used here: stackoverflow.com/a/13273672/1654265 where i use after and before as two triangles overlapped and a bit shifted one from each other...
-
alias51 almost 11 yearsThanks, I've modified your approach for some advanced styling, here: jsfiddle.net/robmc/ZvEyx/4 I want to try and achieve the styled top right curve corner on the tab; I dont think you need the tab:before for this, but I cant see a way to get rid of the blue curve on the parent. Any ideas?
-
Mathijs Flietstra almost 11 yearsJust turn off the
border-radius
on the top right corner of the tab and move the:after
pseudo element a bit more to the right (increase its negative right margin): jsfiddle.net/ZvEyx/6