CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Bestin John
Bestin John

Reputation: 1803

Responsive Slanted Tabs

I am trying to create slanted tabs similar to the image shown below: enter image description here

but I am facing the following issues:

Here is the code I have worked till now,

.slant-tabs {
  border: solid 2px black;
}

.slant-tabs li {
  float: left;
  background: #cccccc;
  padding-bottom: 0px
}

.slant-tabs li:not(:first-child) a:before {
  content: '';
  position: absolute;
  border: 20px solid #cccccc;
  border-left-color: transparent;
  border-top-color: transparent;
  right: 100%;
  top: 0;
}

.slant-tabs li:not(:last-child) {
  margin-right: 45px;
}

.slant-tabs li:not(:last-child) a:after {
  content: '';
  position: absolute;
  border: 20px solid #cccccc;
  border-right-color: transparent;
  border-bottom-color: transparent;
  left: 100%;
  top: 0;
}

.slant-tabs li a {
  text-decoration: none;
  line-height: 40px;
  padding: 0 8px !important;
}

.slant-tabs li a:hover {
  background-color: #cccccc;
}

.slant-tabs li.active a {
  background-color: #cccccc;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="slant-tabs">
    <ul class="nav">
      <li class="active">
        <a href="#description" data-toggle="tab">
          <span>Description</span>
        </a>
      </li>
      <li>
        <a href="#specification" data-toggle="tab">
          <span>Specification</span>

        </a>
      </li>
      <li>
        <a href="#avail" data-toggle="tab">
          <span>Availacoes</span>
        </a>
      </li>
    </ul>

    <div class="tab-content clearfix">
      <div class="tab-pane active" id="description">
        <h3>Content's background color is the same for the tab</h3>
      </div>
      <div class="tab-pane" id="specification">
        <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab
        </h3>
      </div>
      <div class="tab-pane" id="avail">
        <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Please me with above issues

Upvotes: 0

Views: 1189

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

Flex is indeed the way to go (display:table/table-cell for older browsers)

For the slanted corners, you may use border or linear bg gradients.

.slant-tabs {
  border: solid 2px black;
}

.nav {
  display: flex;
  overflow: hidden;
}

.slant-tabs li {
  flex: 1;
  position: relative;
  float: left;
  background: #cccccc;
  padding-bottom: 0px
}

a:before,
a:after {
  height: 45px;
  width: 45px;
  z-index: 0;
}

.slant-tabs li a:before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  background: linear-gradient(-45deg, #ccc calc(50% - 2px), transparent calc(50% - 2px));
}

.slant-tabs li:not(:last-child) {
  margin-right: 45px;
}

.slant-tabs li a:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  background: linear-gradient( 135deg, #ccc calc(50% - 2px), transparent calc(50% - 2px));
  z-index: 1
}

.slant-tabs li a {
  text-decoration: none;
  line-height: 40px;
  padding: 0 8px !important;
}

.slant-tabs li a:hover {
  background-color: #cccccc;
  color: gray!important
}

.slant-tabs li a:hover:before {
  background: linear-gradient( -45deg, #f2f2f2 calc(50% - 2px), transparent calc(50% - 2px));
}

.slant-tabs li a:hover:after {
  background: linear-gradient( 135deg, #f2f2f2 calc(50% - 2px), transparent calc(50% - 2px));
}

.slant-tabs li.active a {
  background-color: #cccccc;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="slant-tabs">
    <ul class="nav">
      <li class="active">
        <a href="#description" data-toggle="tab">
          <span>Description</span>
        </a>
      </li>
      <li>
        <a href="#specification" data-toggle="tab">
          <span>Specification</span>

        </a>
      </li>
      <li>
        <a href="#avail" data-toggle="tab">
          <span>Availacoes</span>
        </a>
      </li>
    </ul>

    <div class="tab-content clearfix">
      <div class="tab-pane active" id="description">
        <h3>Content's background color is the same for the tab</h3>
      </div>
      <div class="tab-pane" id="specification">
        <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab
        </h3>
      </div>
      <div class="tab-pane" id="avail">
        <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 3

Cameron Scott
Cameron Scott

Reputation: 1306

This is a great use-case for some basic flexbox. Rather than floating your tabs to the left, you can add display: flex to your .nav element, and then flex: 1 to each <li> within that child. That tells your <li> elements to take up even amounts of all available space—which makes them equal width.

Here are the full rules:

.nav{
  display: flex;
}

.slant-tabs li {
  //float: left;
  flex: 1;
  background: #cccccc;
  padding-bottom: 0px
}

And you can see a working demo here: http://codepen.io/anon/pen/aJeOdP

Don't forget, though, that if you're going to use this code in production, you'll want to ensure the requisite browser prefixes are in place: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions