Треугольник на карточке товара с фоном

176

24 декабря 2018, 08:00

Нужно сверстать вот так

Треугольник справа должен быть тоже с фоном как часть блока с фотографией. Таких карточек на странице должно быть много. Как такое сверстать ?

Answer 1

Можно с помощью clip-path, но не совсем кросбраузерно ( уголок можно будет поменять )

Вот тут онлайн генератор

div { 
  -webkit-clip-path: polygon(0% 0%, 90% 0, 90% 34%, 100% 50%, 91% 68%, 90% 100%, 0 100%); 
  clip-path: polygon(0% 0%, 90% 0, 90% 34%, 100% 50%, 91% 68%, 90% 100%, 0 100%); 
  width: 300px; 
  height: 300px; 
  background-image: url(https://lh3.googleusercontent.com/pJSdihKG65VhLXr1bhOl6qkNvch39AaUnwVPuUP3TPQPr4pIDIomz1JqwlKsLvNbwoYY=w300); 
  background-color: #333; 
}

<div></div>

Answer 2

Для кроссбраузерности можно заморочится и сделать так:

#defs{ 
  width:1px; 
  height:1px; 
  position:absolute; 
  z-index:-1; 
} 
.image{ 
  width:330px; 
  height:300px; 
}

<!--определяем фигуру для обрезки--> 
<svg id="defs"> 
  <defs> 
    <clipPath id="my-clip"> 
      <path d="M0,0 h300 v130 l30,20 -30,20 v130 h-300 z" /> 
    </clipPath> 
  </defs> 
</svg> 
<!--Сами картинки--> 
<svg viewBox="0 0 330 300" preserveAspectRatio="xMidYMid meet" class="image"> 
  <image x="0" y="0" width="330" height="300" preserveAspectRatio="xMidYMid slice" xlink:href="https://lh3.googleusercontent.com/pJSdihKG65VhLXr1bhOl6qkNvch39AaUnwVPuUP3TPQPr4pIDIomz1JqwlKsLvNbwoYY=w300" clip-path="url(#my-clip)"/> 
</svg> 
<svg viewBox="0 0 330 300" preserveAspectRatio="xMidYMid meet" class="image"> 
  <image x="0" y="0" width="330" height="300" preserveAspectRatio="xMidYMid slice" xlink:href="https://seguronosabias.files.wordpress.com/2013/09/bliss-4.png" clip-path="url(#my-clip)"/> 
</svg> 
<svg viewBox="0 0 330 300" preserveAspectRatio="xMidYMid meet" class="image"> 
  <image x="0" y="0" width="330" height="300" preserveAspectRatio="xMidYMid slice" xlink:href="https://defendingrussia.ru/upload/images/ckeditor5/4%20-%20Copy%201.jpg" clip-path="url(#my-clip)"/> 
</svg>