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

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

READ ALSO
Почему часть скрипта не выполняется с телефона?

Почему часть скрипта не выполняется с телефона?

Есть такой скрипт меняющий расположения блока при полном скролле страницы, на компьютере все работает хорошо, на телефоне выполняется только...

170
Табы с плагином SelectBoxIt

Табы с плагином SelectBoxIt

Всем привет!! Я использую плагин SelectBoxIt для стилизации элемента selectНо нужно на основе этого select сделать табы(вкладки), контент которых менялся...

162
WPF Prism Не работает RequestNavigate

WPF Prism Не работает RequestNavigate

Вобщем регистрация проходит с RegisterViewWithRegion и ничего не показывает с RequestNavigate

166
Простые unit-тесты на проверку пароля

Простые unit-тесты на проверку пароля

Помогите переделать Unit-тестНа форме AdForm имеется textbox, на который нужно написать два простых unit-теста

191