CSS border top 隐藏文字

Question

我正在尝试创建一个带有标签的梯形，但与任何公司工作场所一样，它需要以特定方式呈现。我可以用我的选项卡创建一个梯形形状，底部较大的一侧，但是当我尝试翻转它时，文本被隐藏了，我不知道为什么会这样。

我创建了一个 plunkr 给你看。我在 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

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

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

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

它是多种事物的组合 - (1) 元素上的 height: 0px (2) 当文本只有边框而没有高度时文本在框中的定位方式 (3) line-height: 30px 在元素上和 (4) 应用于父元素的 overflow: hidden。

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

/* 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;
}

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

当框只有边框没有高度(0px) and 时，框内的文字是定位的(这个词用法不严谨，不是指position属性) 使得文本位于顶部边框下方但位于底部边框上方。

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

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

在父项上增加高度或移除溢出设置是否可以解决问题？

否，如果您希望文本位于形状之上（或者换句话说，看就好像它在形状内部一样）。这是因为文本仍保留在上边框下方，none 这些设置将更改它。

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

您可以将内容包装在位于 a 元素顶部的 span 元素中，负边距等于 border-top-width .

/* 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;
}

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

您也可以像 Mojtaba Hn 的回答中一样使用绝对定位的额外元素。

还有其他替代方法吗？

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

使用 CSS 变换：

/* 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;
}

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

使用 SVG：

/* 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;
}

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

CSS border top 隐藏文字

CSS border top is hiding text

css

tabs

css-shapes