Верстка текста в треугольнике

  .text { 
    display: inline-block; 
    font-size: 30px; 
    font-family: Arial; 
    padding: 25px; 
    background-color: #fff; 
  } 
  .text span { 
    padding: 20px; 
  } 
  .text span.txt { 
    padding: 0px; 
  } 
  .text span.bg { 
    background-image: url(https://nordconnect.com/ru/wp-content/uploads/2016/06/customer-triangle.png); 
    background-position: 100% center; 
    -webkit-background-size: contain; 
    background-size: contain; 
    background-repeat: no-repeat; 
    color: white; 
  } 
  .list { 
    padding: 0px; 
    margin: 0px; 
    background-color: #fff; 
  } 
  .list li { 
    list-style: none; 
    display: inline-block; 
  }

<ul class="list"> 
  <li><p class="text"><span class="txt">Start</span><span class="bg">Ex</span></p></li> 
  <li><p class="text">Support</p></li> 
  <li><p class="text">About US</p></li> 
</ul>

.triangle-title { 
  display: inline-block; 
  height: 50px; 
  line-height: 50px; 
  background: transparent url('https://cdn.icon-icons.com/icons2/934/PNG/512/play-black-triangle-interface-symbol-for-multimedia_icon-icons.com_72958.png') no-repeat right center / auto 100%; 
  color: red; 
  padding-right: 15px; 
}

<div class="triangle-title">Какой-то текст ЫЫ</div>

.nav { 
  margin: 0; 
  padding: 0; 
  display: flex; 
  flex-flow: row nowrap; 
  justify-content: space-around; 
} 
 
.nav li { 
  display: inline-block; 
} 
 
.text { 
  font: 24px 'Trebuchet MS'; 
  position: relative; 
  margin-top: 1em; 
} 
 
.inverse { 
  color: white; 
} 
 
.triangle { 
  position: absolute; 
  background-color: #ff8a8a; 
  z-index: -10; 
  margin-top: .33em; 
  margin-left: -1.2em; 
} 
 
.triangle:before, 
.triangle:after { 
  content: ''; 
  position: absolute; 
  background-color: inherit; 
} 
 
.triangle, 
.triangle:before, 
.triangle:after { 
  width: 1.1em; 
  height: 1.1em; 
  border-top-right-radius: 30%; 
} 
 
.triangle { 
  transform: rotate(150deg) skewX(-30deg) scale(1, .866); 
} 
 
.triangle:before { 
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%); 
} 
 
.triangle:after { 
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); 
} 
 
.inside { 
  position: absolute; 
}

<ul class="nav"> 
  <li> 
    <div class="text">Start 
      <span class="inverse">Ex<span class="triangle"></span></span> 
    </div> 
  </li> 
  <li> 
    <div class="text">Support</div> 
  </li> 
  <li> 
    <div class="text">About US</div> 
  </li> 
</ul>