html - 三 Angular 形内的三 Angular 形 CSS

Question

我希望为导航结构创建以下设置。

我可以让白色向下三 Angular 形毫无问题地工作，但是如何在第一个三 Angular 形的顶部放置另一个三 Angular 形(绿线)，而没有完整的边框/背景或使用图像？我只能在白色箭头上得到一个实心绿色箭头，这不是我想要做的。

这是我目前拥有的。

 .custom-nav li a:after { 
    content: ""; 
    z-index: 99; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 40px 150px 0 150px; 
    border-color: #ffffff transparent transparent transparent; 
    position: absolute; 
    top: 173%; left: -75px; 
}

<div>
  <ul class="custom-nav">
    <li><a href="#">Environment</a></li>
    <li><a href="#">Health</a></li>
  </ul>
</div>

Answer 1

我认为获得类似内容的最佳选择是使用 SVG:

body {
  margin: 0;
  background: #DEE;
}

.nav {
  display: flex;
}

.button {
  position: relative;
  background: transparent;
  border: 0;
  width: 50%;
  height: 100px;
  padding: 0 0 50px;
  background: content-box white;
  font-family: monospace;
  font-weight: bold;
  outline: none;
  cursor: pointer;
}

.button__text {
  position: relative;
  z-index: 1;
}

.button__triangle {
  position: absolute;
  top: 25px;
  bottom: 0;
  left: 50%;
  width: 100%;
  transition: transform ease-in 150ms;
  transform: translate(-50%, -50%);
}

.button:hover > .button__triangle {
  transform: translate(-50%, 0);
}

.button__triangle--big {
  fill: white;
}

.button__triangle--small {
  fill: white;
  stroke: red;
  stroke-width: 2px;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity ease-in 150ms;
}

.button:hover .button__triangle--small {
  opacity: 1;
}

<nav class="nav">
  <button class="button">
    <span class="button__text">OPTION 1</span>
    
    <svg viewBox="0 0 200 50" class="button__triangle">
      <polygon points="0,0 100,50 200,0" class="button__triangle--big" />
      <polyline points="50,5 100,30 150,5" class="button__triangle--small" />
    </svg>
  </button>
  
  <button class="button">
    <span class="button__text">OPTION 2</span>
    
    <svg viewBox="0 0 200 50" class="button__triangle">
      <polygon points="0,0 100,50 200,0" class="button__triangle--big" />
      <polyline points="50,5 100,30 150,5" class="button__triangle--small" />
    </svg>
  </button>
</nav>