Tell me how to make up such a triangle (look at the photo), so that there would be a text in it and that all the headings would be aligned correctly. I tried both via css and as a background image, but nothing happens ... Thank you all very much!) enter image description here

    3 answers 3

    Through the background image is quite normally implemented).

    .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>

      Symy stupid way: D

       .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>

        Source: How to make 3-corner-rounded triangle in CSS (SO)