Sexy CSS tabs with css figures

sexytabs.css.scss

// SEXY TABS
$default_font: "Tahoma";

.sexy-tabs {
  height: 40px;

  ul {
    display: block;
    height: 40px;

    li {
      display: inline-block;
      cursor: pointer;
    }

  }

  .tab2left {
    margin-right: 15px;
    float:left;
    height: 40px;
    position: relative;
    background: #e5e4ce;

    .content {
      padding: 10px 16px 0 16px;
      font: 16px $default_font;
    }

    .corner {
      position: absolute;
      top:0;
      right:-10px;
      width: 0;
      height: 0;
      border-bottom: 40px solid #e5e4ce;
      border-right: 10px solid transparent;
    }

  }

  .active {
    background: #f8f8f8;
    cursor: default;

    .corner {
      border-bottom: 40px solid #f8f8f8;
    }

  }

}

template.html.slim

.sexy-tabs
  ul
    li.tab2left.active
      .content Tab name 1
      .corner
    li.tab2left
      .content Tab name 2
      .corner