Cool CSS Arrow Tab

Arrow tab with CSS.

by sendil J

HTML

<div id="arrow1" class="arrow">
    <div class="red-gradient">Arrow with a gradient!</div>
</div>
<p>For this one the blue area would be your background color.</p>
<br>    
<div id="arrow2" class="arrow">
    <div class="red">Arrow without.</div>
</div>
<p>For this one the blue area would be your tab color.</p>

<h2>Final Product</h2>
<div id="arrow3" class="arrow">
    <div class="red-gradient">Arrow with a gradient!</div>
</div>
<div id="arrow4" class="arrow">
    <div class="red">Arrow without!</div>
</div>

CSS

body {
    padding: 10px;
    color: #000;
    font-family: arial;
}
.arrow {
    position: relative;
    color: #fff;
    font-weight: bold;
    margin-bottom: 5px;
}
.red-gradient {
    height: 20px;
    padding: 10px;
    width: 200px;
    color: #fff;
    background: #c40320; /* Old browsers */
    background: -moz-linear-gradient(top,  #c40320 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c40320), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c40320 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c40320 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c40320 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #c40320 0%,#8f0222 44%,#6d0019 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c40320', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.red {
    height: 20px;
    padding: 10px;
    width: 160px;
    color: #fff;
    background: #8f0222;
}
#arrow1:after {
    content: '';
    height: 0;
    display: block;
    border-color: blue blue blue transparent;
    border-width: 20px;
    border-style: solid;
    position: absolute;
    top: 0;
    left: 180px;
}
#arrow2:after {
    content: '';
    height: 0;
    display: block;
    border-color: transparent transparent transparent blue;
    border-width: 20px;
    border-style: solid;
    position: absolute;
    top: 0;
    left: 180px;
}
#arrow3:after {
    content: '';
    height: 0;
    display: block;
    border-color: #fff #fff #fff transparent;
    border-width: 20px;
    border-style: solid;
    position: absolute;
    top: 0;
    left: 180px;
}
#arrow4:after {
    content: '';
    height: 0;
    display: block;
    border-color: transparent transparent transparent #8f0222;
   ...

JavaScript

// NO JAVASCRIPT 
// See HTML and CSS TABS