Фон блока формой трапеции

141

06 сентября 2019, 08:40

Нужен блок с фоном в форме трапеции как на картинке

И нужно чтобы отображалось корректно в браузерах IE11, Mozilla, Opera, Edge, Chrome Как это сделать?

Answer 1

Как обычно ...делается это в SVG создаётся pattern внутри image делаем нужную фигура и на фон ставим тот pattern и всё

codepen.io/pen на случай если картинка не отобразится

<svg viewBox="0 0 323 106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"> 
 <defs> 
  <pattern id="pattern" width="1228.5714" height="504.28573" patternTransform="matrix(.28 0 0 .4 -115 84)" patternUnits="userSpaceOnUse"> 
   <image x="-1.6e-14" y="9.3e-14" width="1229" height="504" style="image-rendering:optimizeQuality" preserveAspectRatio="none" 
   xlink:href="http://image2.thematicnews.com/uploads/topics/preview/00/08/44/33/79079f9c97.jpg"/> 
  </pattern> 
 </defs> 
 <g transform="translate(115 -84)"> 
  <path d="m-115 84h323v88l-323 18z" style="fill-rule:evenodd;fill:url(#pattern);"/> 
 </g> 
</svg>