html - 响应式倾斜标签

Question

我正在尝试创建类似于下图所示的倾斜标签:

但我面临以下问题:

• 标签没有占据整个容器的宽度
• 选项卡在其他视口(viewport)(平板电脑和移动设备)上分成不同的行。

这是我到目前为止使用的代码，

.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>

请我解决以上问题

Answer 1

Flex 确实是可行的方法(display:table/table-cell for older browsers)

对于斜 Angular ，您可以使用边框或线性背景渐变。

.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>