Tabs with matching corners

by agib

HTML

<!-- My try to find a way to make aesthetically pleasing "matching corners" on tabs without using images -->
<h2>Tabs with mismatching corners</h2>
</div><div class="tabset">
    <div class="tab active"></div>
    <div class="tab"></div>
    <div class="tab"></div>
    <div class="clear-floats"></div>
    <div class="tab-content-top"></div>
</div>
<h2>Tabs with matching corners (pure CSS)</h2>
<div class="tabset">
    <div class="tab active">
        <div id="left-cutout" class="cutout-corner-bg">
            <div class="cutout-corner-fg"></div>
        </div>
        <div id="right-cutout" class="cutout-corner-bg">
            <div class="cutout-corner-fg"></div>
        </div>
    </div>
    <div class="tab">
        <div id="left-cutout" class="cutout-corner-bg">
            <div class="cutout-corner-fg"></div>
        </div>
        <div id="right-cutout" class="cutout-corner-bg">
            <div class="cutout-corner-fg"></div>
        </div>
    </div>
    <div class="tab">
        <div id="left-cutout" class="cutout-corner-bg">
            <div class="cutout-corner-fg"></div>
        </div>
        <div id="right-cutout" class="cutout-corner-bg">
            <div class="cutout-corner-fg"></div>
        </div>
    </div>
    <div class="clear-floats"></div>
    <div class="tab-content-top"></div>
</div>

CSS

h2 { font-family: Helvetica, Arial, sans-serif; font-size: 2em; margin: 24px 0 0 24px; }
.tabset { padding: 30px; }
.tab { height: 70px; width: 140px; margin-left: 10px; position:relative; float:left; border-radius: 4px; background-color: #C5D0D7; cursor:pointer; }
.tab.active { height:80px; border-radius: 4px 4px 0 0;  }
.tab:not(.active) #left-cutout, .tab:not(.active) #right-cutout { display:none; }
.tab.active, .cutout-corner-bg, .tab-content-top { background-color: #5885A9; }
.cutout-corner-bg { height: 4px; width: 4px; position:absolute; bottom: 0; }
#left-cutout.cutout-corner-bg { left: -4px;  }
#right-cutout.cutout-corner-bg { right: -4px; }
#left-cutout .cutout-corner-fg { border-radius: 0 0 4px 0; }
#right-cutout .cutout-corner-fg { border-radius: 0 0 0 4px; }
.cutout-corner-fg { height: inherit; width: inherit;  background-color: White; }
.tab-content-top { height: 12px; width: 100%; }
.clear-floats { clear:both; }

JavaScript

$(".tab").click(function() {
  $(this).siblings().removeClass("active");
  $(this).addClass("active");
});