Есть такой дизайн.
Внизу блока вместо прямой границы нарисован овал. Как его сделать?
Если вам не нужно, реализовывать слайдер, а достаточно добавить подобного рода статический блок, то просто вырежьте картинку и сохраните в формате png, а после добавьте в качестве фона. Если же необходимо, чтобы слайдер работал, то можете с помощью position: absolute;
наложить сверху белое изображение закругленной формы
Картинку можно обрезать по криволинейной форме с помощью clip-path
или mask
или pattern
.
Но во всех случаях нужен path
для криволинейной формы.
Для того, чтобы получить этот криволинейный <path>
необходимо
загрузить картинку в векторный редактор и нанести узловые точки с
помощью инструмента, - Рисовать кривые Безье
(1. на рисунке)
Изменить тип узлов на автоматически сглаженные
цифра 3 на рисунке и
передвигая, уменьшая или увеличивая длину рычагов (4), добиться полного
совпадения кривой с заданной формой
Сохранить файл в формате SVG
Оптимизировать файл (будет убрана лишняя информация Inkscape) с помощью SVG-EDITOR
Скопировать формулу path
Далее будем использовать этот <path>
для обрезки изображения по заданной форме
.container {
width:100%;
height:100%;
background-color:#7AA3A3;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 674 236" >
<defs>
<clipPath id="cp1">
<path d="m0 0.6 674 0v155c0 0-22.3 24.9-35.8 34.5-12.8 9-27.2 15.8-42 20.9-18.8 6.4-38.7 10-58.5 11.7-21.8 1.9-43.8-0.1-65.7-1.7-30.3-2.3-60.3-7.5-90.4-11.5-26.3-3.5-52.7-6.8-78.9-10.8C232.2 187.7 91.8 162.5 91.8 162.5L0 146.3Z" style="fill:none;stroke:black"/>
</clipPath>
</defs>
<image xlink:href="https://i.stack.imgur.com/9db1R.png" width="100%" height="100%" clip-path="url(#cp1)" />
</svg>
</div>
Приложение полностью адаптивно и работает во всех браузерах
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
!ЗдраствуйтеПодскажите, как можно сделать вот такую мини-галерею из картинок резиновой
Подскажите пожалуйста, как лучше сверстать в данном случае, соты? Я верстал подобное, но там были одинаковые бордеры (Приложил код)В данном...