Какими способами можно сверстать каплю снизу блока чтобы в ней был background-image блока? Интересует несколько возможных решений
-
1SVG, clip-path, mask, просто background-image.. Выбирайте.– De.MinovCommented 2 апр. 2023 в 17:14
-
1"Интересует несколько возможных решений" Интересует несколько ваших попыток решения.– UModeLCommented 2 апр. 2023 в 17:39
-
первые размышления начались с использования псевдоэлементов, сейчас играюсь с clip-path, пока что желаемого результата добиться не получается :с– ptrv-devCommented 2 апр. 2023 в 18:14
-
как я понял, добиться желаемого закругления просто используя встроенные возможности (circle, polygon...) в clip-path у меня не получиться, жаль нельзя например в полигон вложить на какое-то место circle. Получается мне нужно использовать SVG в clip-path, но любая попытка сделать это растягивает SVG до некорректных размеров (пробовал засунуть path svg в clip-path: path(...).– ptrv-devCommented 2 апр. 2023 в 18:20
-
думаю тут ты можешь найти ответ. html5book.ru/nestandartnye-bloki-na-sayte а я после работы покапаюсь. тема интересная)– ManekenCommented 3 апр. 2023 в 5:10
|
Показать ещё 2 комментария
1 ответ
Мужик, смотри. Увидел, что ты уже с этим мучался).
<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 и выставляем им размеры. Далее в ставим нашу картинку. Для наглядности создал еще один див.
Может быть я и плохо объяснил, может быть не точь-в-точь как в твоем примере, Но получился отдельный блок необычной формы. От сюда можно уже плясать.
-
Пока что этот вариант дал мне наиболее подходящий результат, пока игрался с clip-path тоже получал результат очень похожий на макет, но его было невозможно адаптировать. Сейчас буду пытаться адаптировать Ваш вариант, спасибо!– ptrv-devCommented 4 апр. 2023 в 9:05