Как правильно обрезать низ изображения?

283
02 февраля 2018, 19:59

Имеется 2 блока, у каждого из блоков задан bg изображением. Как правильно bg первого блока с низу обрезать так, чтобы получилось примерно то, что имеется на скрине?

Answer 1

Решение SVG

Полностью адаптивно к любому размеру экрана. Работает во всех браузерах.

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

Answer 2

Не лучший вариант конечно. Ссылка

* { 
  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>

READ ALSO
Как правильно подключить CSS в webpack?

Как правильно подключить CSS в webpack?

Всем приветНикак не могу подключить CSS файл к webpack

223
WordPress - не применяются стили

WordPress - не применяются стили

Создал функцию в functionsphp:

216
Как правильно скрыть часть изображения?

Как правильно скрыть часть изображения?

Имеется изображение в формате <img src="/">, как скрыть обрезать угол изображения?

265
Сложный запрос в mysql

Сложный запрос в mysql

Есть таблица с именами, у каждого имени может быть нескользо пунктов, которые находятся во второй таблице, и есть третья таблица которая их связывает,...

277