Нужно сверстать вот так
Треугольник справа должен быть тоже с фоном как часть блока с фотографией. Таких карточек на странице должно быть много. Как такое сверстать ?
Можно с помощью 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>
Для кроссбраузерности можно заморочится и сделать так:
#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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Есть такой скрипт меняющий расположения блока при полном скролле страницы, на компьютере все работает хорошо, на телефоне выполняется только...
Всем привет!! Я использую плагин SelectBoxIt для стилизации элемента selectНо нужно на основе этого select сделать табы(вкладки), контент которых менялся...
Вобщем регистрация проходит с RegisterViewWithRegion и ничего не показывает с RequestNavigate
Помогите переделать Unit-тестНа форме AdForm имеется textbox, на который нужно написать два простых unit-теста