Имеется 2 блока, у каждого из блоков задан bg
изображением. Как правильно bg
первого блока с низу обрезать так, чтобы получилось примерно то, что имеется на скрине?
Полностью адаптивно к любому размеру экрана. Работает во всех браузерах.
<style>
.container {
width:100%;
height:100%;
background:grey;
background-position: 0% 50%;
}
</style>
<div class="container" >
<svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="none" >
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<polygon points="0,1 0,0.5 0.5,0.67 1,0.5 1,1"></polygon>
</clipPath>
</defs>
<image xlink:href="http://placeimg.com/400/300/any" clip-path="url(#clip)" width="100%" height="100%" />
</svg>
</div>
Не лучший вариант конечно. Ссылка
* {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
margin: 30px;
}
.item {
width: 100%;
height: 250px;
}
.item:first-child {
-webkit-clip-path: polygon(51% 100%, 100% 60%, 100% 0, 0 0, 0 60%);
clip-path: polygon(51% 100%, 100% 60%, 100% 0, 0 0, 0 60%);
background: url(https://via.placeholder.com/300x150);
background-position: 0% 50%;
background-size: cover;
}
.item:last-child {
position: absolute;
top: 50%;
z-index: -1;
background: url(https://via.placeholder.com/300x150/300);
background-position: 0% 50%;
background-size: cover;
}
<div class="wrapper">
<div class="item">
</div>
<div class="item"></div>
</div>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Имеется изображение в формате <img src="/">, как скрыть обрезать угол изображения?
Есть таблица с именами, у каждого имени может быть нескользо пунктов, которые находятся во второй таблице, и есть третья таблица которая их связывает,...