Фон в виде стрелки

278

31 мая 2017, 03:16

Как на картинке, фон слегка похож на стрелку. Нужен наиболее верный способ

Answer 1

Вариант с clip-path

* { 
  padding: 0; 
  margin: 0; 
} 
 
.block { 
  height: 100vh; 
  width: 50%; 
  background: linear-gradient(to bottom, rgba(67, 46, 59, 1) 0%, rgba(204, 142, 109, 1) 100%); 
  -webkit-clip-path: polygon(95% 0, 100% 38%, 95% 100%, 0 100%, 0 0); 
  clip-path: polygon(95% 0, 100% 38%, 95% 100%, 0 100%, 0 0); 
  -webkit-clip-path: url("#clip-path"); 
  clip-path: url("#clip-path"); 
}

<div class="block"></div> 
<svg width="0" height="0"> 
    <defs> 
        <clipPath id="clip-path" clipPathUnits="objectBoundingBox"> 
            <polygon points="0.95 0, 1 0.38, 0.95 1, 0 1, 0 0" /> 
        </clipPath> 
    </defs> 
</svg>