Question

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

但我面临以下问题：

标签不占用整个容器宽度
标签在其他视口（平板电脑和手机）中分成不同的行。

这是我迄今为止所使用的代码，

＆＃13;

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

＆＃13;

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

＆＃13;

请与我讨论上述问题

Answer 1

Flex确实是（旧版浏览器display:table/table-cell）的方式

对于倾斜的角落，您可以使用边框或线性bg渐变。

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

Answer 2

对于一些基本的flexbox来说，这是一个很好的用例。您可以将display: flex添加到.nav元素，然后flex: 1添加到该子项中的每个<li>，而不是将标签浮动到左侧。这会告诉你的<li>元素占用所有可用空间 - 这使它们的宽度相等。

以下是完整规则：

.nav{
  display: flex;
}

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

你可以在这里看到一个有效的演示：http://codepen.io/anon/pen/aJeOdP

但是，请不要忘记，如果您要在生产中使用此代码，那么您需要确保所需的浏览器前缀到位：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

响应倾斜的标签

2 个答案: