How to create slanted tabs with a border in CSS? [duplicate]

Question

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;
}

http://jsfiddle.net/P3P3Z/2/

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?

Answer 1

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;
}