使用CSS指向非活动标签的活动标签？

Question

有没有办法，使用CSS来制作它，以便在单击选项卡时（如下图所示），选项卡“指向”非活动选项卡？

我正在尝试使绿色选项卡1（在下图中）指向选项卡2和3，然后如果单击选项卡2，它指向选项卡3.但是，当您单击选项卡3时，它将保持矩形（没有箭头）。

我一直在尝试各种Stack Overflow代码段，这些代码段成功地将箭头放在选项卡的上方或下方，但似乎没有一个与活动选项卡旁边的非活动选项卡重叠。

这是我的HTML的基本结构：

<ul>
  <li class="active">
    <a href="#">Tab 1</a>
  </li>
  <li>
    <a href="#">Tab 2</a>
  </li>
  <li>
    <a href="#">Tab 3</a>
  </li>
</ul>

对于CSS，我一直在使用这样的代码片段：https://codepen.io/mimoYmima/pen/MwzQym

我遇到的问题似乎是，因为标签左侧浮动，我无法使活动标签的箭头与其他标签重叠。

Answer 1

您可以将具有绝对定位的伪元素用作活动选项卡的箭头。除非列表项被赋予“活动”权限，否则它将被隐藏。标签。原始HTML标记保持不变。

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
html {
  font-family: sans-serif;
}
body {
  display: flex;
}
ul {
  margin: auto;
  padding: 0;
  display: inline-block;
  list-style-type: none;
  overflow: hidden;
  background-color: #eee;
  background-image: linear-gradient( #fff, #ddd);
  border-radius: 1rem;
  border: 1px #888 solid;
  font-weight: bold;
}
li {
  float: left;
  padding: 1.5rem 4rem;
  border-right: 1px #aaa solid;
  position: relative;
}
li:last-child {
  border: none;
}
a {
  text-decoration: none;
  color: #000;
}
.active {
  background-color: #0b0;
  background-image: linear-gradient( #0b0, #090 );
}
li.active::after {
  content:'';
  width: 3rem;
  height: 3rem;
  background-color: #eee;
  position: absolute;
  border: none;
  transform: scaleX( 0.75 ) rotate( 45deg ) translate( -50% );
  top: 50%;
  right: -2.45rem;
  margin-top: -0.45rem;
  border-top: 1px #888 solid;
  border-right: 1px #888 solid;
  background-color: #0b0;
  background-image: linear-gradient( 130deg, #0b0, #090 );
  border-top-right-radius: 0.5rem;
}

＆＃13;

<ul>
  <li class="active">
    <a href="#">Tab 1</a>
  </li>
  <li>
    <a href="#">Tab 2</a>
  </li>
  <li>
    <a href="#">Tab 3</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用伪元素将三角形添加到活动标签和其他模拟三角形边框。演示：

ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

ul > li {
  padding: 10px 40px;
  font-weight: bold;
  font-size: 24px;
  height: 40px;
  border: 1px solid #000;
  border-right: none;
  background: linear-gradient(to bottom, #fdfdfd, #828282);
}

ul > li.active {
  background: #66d835;
  position: relative;
}

ul > li.active:before,
ul > li.active:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
}

/* triangle border for active tab */
ul > li.active:before {
  transform: translateX(1px);
  border: 30px solid transparent;
  border-left-color: #000;
  z-index: 1;
}

/* triangle for active tab */
ul > li.active:after {
  /* border-width equal half of the height */
  border: 30px solid transparent;
  border-left-color: #66d835;
  z-index: 2;
}

/* border-radius for first tab */
ul > li:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* border-radius for last tab but not active */
/* and right border */
ul > li:not(.active):last-child {
  border-right: 1px solid #000;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

ul > li > a {
  height: 100%;

  /* styles for text centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

ul > li > a,
ul > li > a:hover,
ul > li > a:active,
ul > li > a:visited {
  color: inherit;
  text-decoration: none;
}

<ul>
  <li class="active">
    <a href="#">Tab 1</a>
  </li>
  <li>
    <a href="#">Tab 2</a>
  </li>
  <li>
    <a href="#">Tab 3</a>
  </li>
</ul>

Answer 3

你不需要漂浮箭头div。

我已将您链接的编解码器分叉并编辑了CSS，以便在您共享的图形中创建效果。这是我的编辑版本：

https://codepen.io/sigil/pen/YxWZGa

<!-- language: lang-css -->
/* Button-arrow CSS: */
.arrow {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  position: relative;
  line-height: 2.5em;
  padding-left: 2em;
  padding-right: 2em;
  background: white;
  color: black;
  border: 1px solid #eee;
}
.arrow:after {
  border-left: 20px solid white;
}
.arrow.active {
  background-color: yellow;
}
.arrow.active,
.arrow.active:after {
  z-index: 50;
  border-left: 20px solid yellow;
}
.arrow.active:after {
  content: "";
  position: absolute;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  height: 0px;
  width: 0px;
  margin-right: -20px;
  right: 0;
}
.arrow:hover,
.arrow:active {
  background: yellow;
  color: black;
}
.arrow:hover:after,
.arrow:active:after {
  border-left: 20px solid yellow;
}

/* General styles to set a baseline 'look' - not related to the button-arrow CSS above */
body, html {
  font-family: helvetica;
  background: #333;
  color: #CCC;
}
.content {
  text-align: center;
  margin: 0 auto;
}

a:visited, a:link {
  color: #F93;
}
<!-- language: lang-html -->

<html>
<body>
  <div class="content">
    <p>Button with an arrow on the right. Just uses an anchor tag and css, so you can use it with your existing buttons easily by just adding the class of "arrow"! Also includes a hover state.</p>

    <a class="arrow active">Arrow</a><a class="arrow">Arrow</a><a class="arrow">Arrow</a>
  </div>
</body>
</html>

<!-- end snippet -->