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

Question

[Михаил Р.]

Всем привет!

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


Спасибо!

Answer 1

[Михаил Р.]

Вопрос решили так:

.container {
width:100%;
height:100%;
background:grey;
background-position: 0% 50%;
}

<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

[Максим Тимофеев]

делаем треугольник с помощью псевдо элелементов, а точнее border-ов.
тыц

Comments

[Александр]

Это помогает, если блок сплошного цвета. У автора на фоне изображение обрезанное по контуру.

[Максим Тимофеев]

Александр, черный блок, сплошного цвета, перекрывает изображение. Конечно же треугольник не для фотографии делаем. Хотя и там можно, но уже с помощью svg маски например.

[Александр]

Максим Тимофеев, Черный блок - тоже с изображением, присмотритесь.

[Максим Тимофеев]

Александр, Это прозрачность на блоке, он просвечивает нижний. А вообще автор мог бы упомянуть такие детали, что бы мы тут не спорили и не присматривались. Может это случайность? Но в любом случае svg маска решает.

[Михаил Р.]

Максим Тимофеев, оба блока - изображения, собственно вопрос звучит так

у каждого из блоков задан bg изображением

[Максим Тимофеев]

Mike Ro, ответ: svg маска, могу еще 18 раз повторить