html - 带有箭头和完整背景色悬停的 CSS 选项卡

Question

我得到了以下标签栏导航，我只想在 CSS 中实现:

在此屏幕上，我已将最后一个元素“Endergebnis”标记为 .active 或 :hover。

我考虑过使用 position: absolute 将箭头创建为伪元素，虽然关于使用 transform: rotate(x deg) 的多个元素，但在我做的每个解决方案中不知道如何为每个选项卡提供完整的填充背景色。

谁能给我一个好的提示？

Answer 1

您可以使用伪和转换:

div {
  margin: 1em;
  border-radius: 0.25em;
  border: solid;
}

h1 {
  margin: 0;
  border-bottom: solid;
}

ul {
  margin: 0;
  ;
  padding: 0;
  list-style-type: none;
  overflow-y: hidden;
  white-space: nowrap;
}

li+li {
  padding: 1em 2em 1em 3em;
}

li {
  padding: 1em 2em;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

li:hover,
li:hover+li:before,
li.active,
li.active+li:before {
  background: lightblue;
}

li:hover:before,
li.active:before {
  background: white;
}

li:last-child:after,
li+li:before {
  content: '';
  position: absolute;
  top: -0.2em;
  bottom: 0;
  border-right: solid;
  border-top: solid;
  pointer-events: none;
  box-sizing: border-box;
  box-shadow: 3px -3px 6px -3px gray;/* a shadow effect can be added too */
  width: 3em;
  transform: rotate(30deg) skewy(30deg);
  z-index: 1;
}

li:last-child:after {
  right: -1.5em;
  background: inherit;
}

li+li:before {
  left: -2em;
}

<div>
  <h1>title</h1>
  <ul>
    <li> one </li>
    <li> two </li>
    <li> three </li>
    <li> four </li>
    <li class="active"> Active </li>
  </ul>
</div>