Question

我正在尝试创建带有标签的梯形形状，但就像任何企业工作场所一样，它需要以某种方式。我可以用我的标签创建一个梯形形状，底部有较大的一侧，但是当我试图翻转它时，文本被隐藏了，我很遗憾为什么会这样。

我已经创建了一个向您展示的傻瓜。我在CSS文件中注释了border-bottom，我默认使用border-top属性。

https://plnkr.co/edit/6O7UHJXUZrmJ4ZGTRTy5

/* Styles go here */

.tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs li {
  float: left;
}
.tabs li a {
  float: left;
  position: relative;
  padding: 0 4px;
  height: 0;
  line-height: 30px;
  text-decoration: none;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  /* choose border-top or border-bottom */
  /*border bottom works*/
  /*border-bottom: 30px solid #e9eaeb;*/
  /*border top hides text*/
  border-top: 30px solid #e9eaeb;
  color: black;
}
.tabs li a:hover {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #87898b;
  color: white;
}

<ul class='tabs'>
  <li><a href='#'>Home</a>
  </li>
  <li><a href='#'>About Us</a>
  </li>
  <li><a href='#'>Blog</a>
  </li>
</ul>

非常感谢任何帮助。

Answer 1

为什么在使用border top而不是border bottom时文本不显示？

它是多种内容的组合 - （1）元素上的height: 0px（2）当文本只有边框而没有高度时，文本在框中的位置（3）line-height: 30px在元素上和（4）应用于父元素的overflow: hidden。

在我详细了解之前，请查看下面的代码段。为了说明的目的，我为四个边框中的每一个添加了不同的颜色。我还在第一行添加了一个背景，以显示文本行的确切位置。

＆＃13;

/* Styles go here */

.tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs li {
  float: left;
}
.tabs li a {
  float: left;
  position: relative;
  padding: 0 4px;
  height: 0;
  text-decoration: none;
  color: black;
}
.tabs.sample li a {
  border-left: 15px solid red;
  border-right: 15px solid blue;
  border-top: 30px solid #e9eaeb;
  border-bottom: 30px solid yellow;
}
.tabs.sample.a li a {
  line-height: 30px;
}
.tabs.sample li a::first-line {
  background: cyan;
}
.tabs li a:hover {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #87898b;
  color: white;
}

＆＃13;

<h3>With Line Height 30px</h3>
<ul class='tabs sample a'>
  <li><a href='#'>Home</a>
  </li>
  <li><a href='#'>About Us</a>
  </li>
  <li><a href='#'>Blog</a>
  </li>
</ul>
<h3>Without Line Height</h3>
<ul class='tabs sample b'>
  <li><a href='#'>Home</a>
  </li>
  <li><a href='#'>About Us</a>
  </li>
  <li><a href='#'>Blog</a>
  </li>
</ul>

＆＃13;

当框中只有边框但没有高度（0px）时，框内的文字被定位（单词的松散使用，它没有引用position属性以这种方式，文本在顶部边框下方但在底部边框上方。

父.tabs元素没有为其定义明确的height。这意味着此元素与其内容一样高。内容高度计算为元素的高度+其边框高度，因为它具有默认的box-sizing（content-box），这意味着边框不是定义高度的一部分。因此，元素的高度（及其父级的高度）是30px，无论它的顶部还是底部都有边框。 overflow: hidden设置意味着高于30px高度的任何内容都将被隐藏。

当元素只有底部边框（即顶部边框为0px）时，文本会显示，因为它位于底部边框的顶部，因此父级上的overflow: hidden不会影响它。当它只有顶部边框时，文本实际上在它下面（意味着它低于30px点），因此它会被剪裁。

在父级上添加高度或删除溢出设置会解决问题吗？

否，如果你希望文字位于形状顶部（或换句话说，看起来好像它在形状内），它就无法解决问题。这是因为文本仍然保留在顶部边框下方，并且这些设置都不会更改它。

使用此方法创建形状时有哪些解决方案？

您可以将内容包含在位于span元素顶部的a元素中，其余边距等于border-top-width。

＆＃13;

/* Styles go here */

.tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs li {
  float: left;
}
.tabs li a {
  float: left;
  position: relative;
  padding: 0 4px;
  height: 0px;
  text-decoration: none;
  color: black;
  line-height: 30px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #e9eaeb;
}
.tabs li a span{
  display: block;
  position: relative;
  margin-top: -30px; /* equal to border top * -1 */
}
.tabs li a:hover {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #87898b;
  color: white;
}

＆＃13;

<ul class='tabs'>
  <li><a href='#'><span>Home</span></a>
  </li>
  <li><a href='#'><span>About Us</span></a>
  </li>
  <li><a href='#'><span>Blog</span></a>
  </li>
</ul>

＆＃13;

你可以使用一个绝对定位的元素，就像在Mojtaba Hn的答案中一样。

还有其他替代方法吗？

是的，还有其他一些使用CSS transform或SVG的替代品。

使用CSS转换：

＆＃13;

/* Styles go here */

.tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs li {
  float: left;
}
.tabs li a {
  float: left;
  display: block;
  position: relative;
  padding: 0 20px;
  height: 30px;
  text-decoration: none;
  color: black;
  line-height: 30px;
}
.tabs li a:before,
.tabs li a:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 50%;
  top: 0px;
  background: #e9eaeb;
  z-index: -1;
}
.tabs li a:before {
  left: 0px;
  transform: skew(30deg);
  transform-origin: left top;
}
.tabs li a:after {
  right: 0px;
  transform: skew(-30deg);
  transform-origin: right top;
}
.tabs li a:hover:before,
.tabs li a:hover:after {
  background: #87898b;
  color: white;
}

＆＃13;

<ul class='tabs'>
  <li><a href='#'>Home</a>
  </li>
  <li><a href='#'>About Us</a>
  </li>
  <li><a href='#'>Blog</a>
  </li>
</ul>

＆＃13;

使用SVG：

＆＃13;

/* Styles go here */

.tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs li {
  float: left;
}
.tabs li a {
  float: left;
  display: block;
  position: relative;
  height: 30px;
  padding: 0 20px;
  text-decoration: none;
  color: black;
  line-height: 30px;
}
.tabs li a svg {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  left: 0px;
}
.tabs li a svg use {
  fill: #e9eaeb;
}
.tabs li a:hover svg use{
  fill: #87898b;
}

＆＃13;

<svg width='0' height='0' viewBox='0 0 10 3' preserveAspectRatio='none'>
  <path d='M0,0 10,0 8,3 2,3z' id='shape' />
</svg>
<ul class='tabs'>
  <li>
    <a href='#'>
      <svg viewBox='0 0 10 3' preserveAspectRatio='none'>
        <use xlink:href='#shape' />
      </svg>
      Home</a>
  </li>
  <li>
    <a href='#'>
      <svg viewBox='0 0 10 3' preserveAspectRatio='none'>
        <use xlink:href='#shape' />
      </svg>
      About Us</a>
  </li>
  <li>
    <a href='#'>
      <svg viewBox='0 0 10 3' preserveAspectRatio='none'>
        <use xlink:href='#shape' />
      </svg>
      Blog</a>
  </li>
</ul>

＆＃13;

Answer 2

看看我做了什么：https://jsfiddle.net/mojtabaa_hn/vppnrw6e/

我对你所说的I'm able to create a trapezoid shape with my tabs with the larger side on the bottom部分感到有些困惑。看看无论如何。

Answer 3

将height:0更改为height:30px，并将height:0添加到悬停类。

CSS border top隐藏文本

3 个答案: