Нужно вставить изображения в черную область, возможно как-то через overflow-hidden
Нужно вставить изображения в черную область, возможно как-то через overflow-hidden,тогда как сделать такую форму для div
?Нужно сделать на CSS.Хелпните, плиз
Ответы (2 шт):
В чем сложность? Где именно не получается?
Создайте внутри обертки два блока, ипользуйте flex, чтобы расположить их рядом горизонтально. Ставьте внутри правого блока хоть фоном, хоть тегом нужное изображение/изображения.
<flexWrap>
<textContentWrap>
<h1>Заголовок</h1>
<p>Описание …</p>
<button>Кнопка</button>
etc.
</textContentWrap>
<imageContentWrap style=“background: url(bolb.png);background-repeat: no-repeat;background-size: 300px 100px;”>
</imageContentWrap>
</flexWrrap>
Создание таких криволинейных контуров на CSS довольно проблематично. Для реализации таких форм идеально подходит SVG
Предлагаю использовать для решения подобных задач инструменты SVG: Mask SVG, clipPath, pattern
По сравнению с масками на css, маски svg являются более мощным инструментом, так как они появились на много раньше.
Документация на русском: тут, тут и тут
Вкратце смысл применения маски,- создание обтравочного контура и обрезка изображения с помощью этого контура. Что достигается при окраске маски в белый цвет. Обратите внимание на fill="white" в path маски.
Техника создания обтравочного контура подробно дана в соседнем ответе.
SVG Mask
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85%" height="85%" viewBox="0 0 912 816" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<path fill="white" d="M420.5 150.5c33.8-6.1 71.9-2.8 101.5 11.8 15.1 7.5 23.4 26.6 27.8 42.8 16.4 61 41.8 56.8 47.3 57.5 54.4 7.6 78.2 16.7 101.1 45.7a164.3 164.3 0 0 1 35 98c-.2 26.8-20.9 54.4-45.6 65.2-24.6 10.6-46.8 15.4-68.5 26.9-43 22.9-64.9 81.5-104.4 115-23.2 19.6-52.6 26.4-81.2 29.4-34 3.4-65.6-4.3-97.8-16.8-10-3.8-16.4-6.9-24.1-21.6-8-15.1 0-23.5 1.6-35 4-28.3 13.3-41.6-14.7-84.9-12.7-19.7-20-7.6-54.2-46-42.7-48.2-46-141 11-192.2 34.8-31.2 64.7-43 98.7-62 21.2-11.7 42.7-29.5 66.5-33.8z" />
</mask>
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/rkQWc.jpg" width="100%" height="100%"/>
</svg> Обтравочный контур создан и его можно использовать также для обрезки изображения с помощью clipPath или для заполнения контура изображением с помощью pattern
clipPath
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85%" height="85%" viewBox="0 0 912 816" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="clip">
<path d="M420.5 150.5c33.8-6.1 71.9-2.8 101.5 11.8 15.1 7.5 23.4 26.6 27.8 42.8 16.4 61 41.8 56.8 47.3 57.5 54.4 7.6 78.2 16.7 101.1 45.7a164.3 164.3 0 0 1 35 98c-.2 26.8-20.9 54.4-45.6 65.2-24.6 10.6-46.8 15.4-68.5 26.9-43 22.9-64.9 81.5-104.4 115-23.2 19.6-52.6 26.4-81.2 29.4-34 3.4-65.6-4.3-97.8-16.8-10-3.8-16.4-6.9-24.1-21.6-8-15.1 0-23.5 1.6-35 4-28.3 13.3-41.6-14.7-84.9-12.7-19.7-20-7.6-54.2-46-42.7-48.2-46-141 11-192.2 34.8-31.2 64.7-43 98.7-62 21.2-11.7 42.7-29.5 66.5-33.8z" />
</mask>
</defs>
<image clip-path="url(#clip)" xlink:href="https://i.stack.imgur.com/rkQWc.jpg" width="100%" height="100%"/>
</svg> pattern
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85%" height="85%" viewBox="0 0 912 816" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="pat" patternUnits="userSpaceOnUse"
width="1425" height="1267" viewbox="0 0 1425 1267" >
<image xlink:href="https://i.stack.imgur.com/rkQWc.jpg" width="100%" height="100%"/>
</pattern>
</defs>
<path fill="url(#pat)" d="M420.5 150.5c33.8-6.1 71.9-2.8 101.5 11.8 15.1 7.5 23.4 26.6 27.8 42.8 16.4 61 41.8 56.8 47.3 57.5 54.4 7.6 78.2 16.7 101.1 45.7a164.3 164.3 0 0 1 35 98c-.2 26.8-20.9 54.4-45.6 65.2-24.6 10.6-46.8 15.4-68.5 26.9-43 22.9-64.9 81.5-104.4 115-23.2 19.6-52.6 26.4-81.2 29.4-34 3.4-65.6-4.3-97.8-16.8-10-3.8-16.4-6.9-24.1-21.6-8-15.1 0-23.5 1.6-35 4-28.3 13.3-41.6-14.7-84.9-12.7-19.7-20-7.6-54.2-46-42.7-48.2-46-141 11-192.2 34.8-31.2 64.7-43 98.7-62 21.2-11.7 42.7-29.5 66.5-33.8z" />
</svg>