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