Как обрезать блок по заданной форме

#html #css #svg #inkscape

Есть такой дизайн.



Внизу блока вместо прямой границы нарисован овал. Как его сделать?
    

Ответы

Ответ 1

Если вам не нужно, реализовывать слайдер, а достаточно добавить подобного рода статический
блок, то просто вырежьте картинку и сохраните в формате png, а после добавьте в качестве
фона. Если же необходимо, чтобы слайдер работал, то можете с помощью position: absolute;
наложить сверху белое изображение закругленной формы


Ответ 2

Картинку можно обрезать по криволинейной форме с помощью clip-path или mask или pattern.  

Но во всех случаях нужен path для криволинейной формы.    


Для того, чтобы получить этот криволинейный  необходимо
загрузить картинку в векторный редактор и нанести узловые точки с
помощью инструмента, - Рисовать кривые Безье (1. на рисунке)
Изменить тип узлов на автоматически сглаженные цифра 3 на рисунке и
передвигая, уменьшая или увеличивая длину рычагов (4), добиться полного
совпадения кривой с заданной формой





Сохранить файл в формате SVG
Оптимизировать файл (будет убрана лишняя информация Inkscape) с помощью SVG-EDITOR    
Скопировать формулу path     


Далее будем использовать этот  для обрезки изображения по заданной форме 



.container {
width:100%;
height:100%;
background-color:#7AA3A3;
}

	 





Приложение полностью адаптивно и работает во всех браузерах