Mike_Ro
@Mike_Ro
$ run войтивайти

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

Всем привет!

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

Спасибо!
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
Mike_Ro
@Mike_Ro Автор вопроса
$ run войтивайти
Вопрос решили так:

.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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
делаем треугольник с помощью псевдо элелементов, а точнее border-ов.
тыц
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы