#block { background: #000; clip-path: polygon(0% 0%,100% 0%,100% 75%,63% 75%,50% 81%,37% 75%,0% 75%); -webkit-clip-path: polygon(0% 0%,100% 0%,100% 75%,63% 75%,50% 81%,37% 75%,0% 75%); width: 100%; height: 900px; } 
 <div id="block"></div>

    2 answers 2

    IE does not support clip-path , so neither. You can try the method given in the code.

     .triangle { width: 100%; float: left; position: relative; background: black; min-height: 900px; } .triangle::after, .triangle:after { width: 0; height: 0; border-style: solid; border-width: 60px 100px 0 100px; border-color: black transparent transparent transparent; content: ''; position: absolute; top: 100%; left: 50%; margin-left: -100px; } 
     <div class="triangle"></div>

    • but is there inline svg? I tried, but the problem is that it does not support percentages in coordinates or supports? - Andrei Talanin

    In Firefox, your example doesn't work either.

    But in principle there is no problem making it in SVG

     <svg width="100%" height="900" viewBox="0 0 100 100" preserveAspectRatio="none"> <!-- Этот rect показывает реальный размер SVG --> <rect width="100%" height="100%" fill="lavender" /> <!-- Вот ваш прямоугольник с хвостиком --> <path d="M0,0 H100 V75 H63 L50,81 37,75 H0 Z" fill="rebeccapurple" /> </svg>

    • But you need a block, otherwise how will I impose the content? I ask because I have to impose this: yadi.sk/i/GENIQ0kotsJAS - Andrey Talanin
    • And what will be inside? - Alexey Ten
    • The text will be, I just removed it from the template for clarity - Andrei Talanin
    • one
      Well, put this svg in the background - Alexey Ten
    • but how to do it? - Andrey Talanin