0

введите сюда описание изображения

Какими способами можно сверстать каплю снизу блока чтобы в ней был background-image блока? Интересует несколько возможных решений

7
  • 1
    SVG, clip-path, mask, просто background-image.. Выбирайте.
    – De.Minov
    Commented 2 апр. 2023 в 17:14
  • 1
    "Интересует несколько возможных решений" Интересует несколько ваших попыток решения.
    – UModeL
    Commented 2 апр. 2023 в 17:39
  • первые размышления начались с использования псевдоэлементов, сейчас играюсь с clip-path, пока что желаемого результата добиться не получается :с
    – ptrv-dev
    Commented 2 апр. 2023 в 18:14
  • как я понял, добиться желаемого закругления просто используя встроенные возможности (circle, polygon...) в clip-path у меня не получиться, жаль нельзя например в полигон вложить на какое-то место circle. Получается мне нужно использовать SVG в clip-path, но любая попытка сделать это растягивает SVG до некорректных размеров (пробовал засунуть path svg в clip-path: path(...).
    – ptrv-dev
    Commented 2 апр. 2023 в 18:20
  • думаю тут ты можешь найти ответ. html5book.ru/nestandartnye-bloki-na-sayte а я после работы покапаюсь. тема интересная)
    – Maneken
    Commented 3 апр. 2023 в 5:10

1 ответ 1

0

Мужик, смотри. Увидел, что ты уже с этим мучался).

<body>
  <svg class="img">
      <mask id="circle">
        <rect fill="white" cx="100" cy="100" width="800" height="300"></rect>
        <circle fill="white" cx="400" cy="300" r="100"></circle>
       
      </mask>
      <g mask="url(#circle)">
        <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="1.jpg"></image>
      </g>
    </svg>
  <div class="gg"></div>
</body>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(./2.jpg);
  background-size: cover;
}

svg {
  z-index: 2;
  position: relative;
  width: 800px;
  height: 400px;
}

.gg {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 300px;
  background-color: blue;
  bottom: 0;
}

Смысл такой: берем контейнер SVG, в него помещаем mask с айди, на который мы будем ссылаться в нашей картинке. Помещаем 2 объекта rect - прямоугольник, circle - круг. Размещаем их по осям x y и выставляем им размеры. Далее в ставим нашу картинку. Для наглядности создал еще один див.

Может быть я и плохо объяснил, может быть не точь-в-точь как в твоем примере, Но получился отдельный блок необычной формы. От сюда можно уже плясать.

1
  • Пока что этот вариант дал мне наиболее подходящий результат, пока игрался с clip-path тоже получал результат очень похожий на макет, но его было невозможно адаптировать. Сейчас буду пытаться адаптировать Ваш вариант, спасибо!
    – ptrv-dev
    Commented 4 апр. 2023 в 9:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.