Треугольник внутри треугольника CSS

Question

Я хочу создать следующую настройку для структуры навигации.

Я могу заставить работать белый треугольник без проблем, но как разместить еще один треугольник (зеленые линии) поверх первого без полной рамки / фона или с использованием изображения? Я могу получить только зеленую стрелку solid над белой, и это не то, что я хочу сделать.

Это то, что у меня сейчас есть.

 .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

Несколько фонов могут сделать это:

.box {
  --w:160px; /* width of the arrow */
  --h:40px;  /* height of the arrow*/
  --b:2px;   /* thickness of the green arrow */
  --o:20%;   /* offset of the green arrow */
  
  /* gadient coloration, white then the green border then white again then transparent */
  --g:#fff var(--o),
      green var(--o) calc(var(--o) + var(--b)),
      #fff calc(var(--o) + var(--b) + 1px) 49.8%,
      transparent 50%;

  height:50px;
  margin:5px;
  border-bottom:var(--h) solid transparent; /* the arrow will take the border space */
  background:
    linear-gradient(to bottom right,var(--g)) calc(50% + calc(var(--w)/4)) 100% border-box,
    linear-gradient(to bottom left ,var(--g)) calc(50% - calc(var(--w)/4)) 100% border-box,
    #fff padding-box;
  background-size:calc(var(--w)/2) var(--h);
  background-repeat:no-repeat;
}


body {
  background:#000;
}

<div class="box"></div>

<div class="box" style="--w:200px;--h:60px;--o:30%;--b:5px"></div>

<div class="box" style="--w:180px;--h:30px;--o:10%;--b:3px"></div>

Answer 2

Я думаю, что лучший способ получить что-то подобное - использовать 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>