Как сделать низ блока выпуклым?

Question

[Абубакр]

Здравствуйте!
Надо сделать низ блока выпуклым. Вот так примерно:

Какие свойства CSS применить для решения этой задачи? clip-path - ом не получилось.
Заранее спасибо

Answer 1

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/381q8chx/3/

Comments

[Абубакр]

с border-radius получается полукруг, а мне надо как на рисунке. я сделал border-radius: 0 0 25% 25% - округляются углы.

[Ярослав Иванов]

Абубакр: А второй пример смотрели ?

[Абубакр]

то есть мне надо выпуклость нижней стороны, а не скругление углов

[Ярослав Иванов]

Абубакр: Повторюсь. Пример второй видели или нет ? без бордер радиус никак не обойтись если не хотите использовать clip-path.

[Ярослав Иванов]

Абубакр: Второй пример на 99% подходит.

[Абубакр]

Ярослав Иванов: да, но у меня на макете углы не такие

[Ярослав Иванов]

Абубакр: Я вам дал вектор дальше сами развивайте. Поиграйтесь с border-radius

[Ярослав Иванов]

Абубакр: Обновил ответ.

[Абубакр]

Ярослав Иванов: после добавления фото, во втором примере, левая и правая стороны фото на 10% уходят по бокам

[Абубакр]

Ярослав Иванов: там опечаток был

[Ярослав Иванов]

Абубакр: Ну так вы понимаете почему так происходит или нет ? вы в код css смотрите ? блок на 120 процентов со смешением влево. Блок уходит на границу обзора чтобы углов не было видно.

Сделайте еще один блок внутри и дайте ему 100% ширины.

[Андрей Федоров]

Абубакр: Ну да нужно немножко и самому головой подумать, верно?

[Абубакр]

Ярослав Иванов: да я понял. А по другому никак?

[Ярослав Иванов]

Абубакр: Нет. Про SVG боюсь говорить. Будет на 1000 вопросов больше.

[Абубакр]

Андрей Федоров: Эт точно)

[Ярослав Иванов]

Абубакр: Мой ответ и Андрей Федоров подходят на 99%. Можете оба отметить как решением.

[Абубакр]

Ярослав Иванов: значит все таки есть?

[Ярослав Иванов]

Абубакр: Если у вас ступор на таком простом то за SVG еще рано браться.

[Ярослав Иванов]

Абубакр: у SVG будут проблемы с адаптивностью.

[Абубакр]

Ярослав Иванов: нет, вы что, бордер радиусом я сделал, но думал есть уникальное решение

[Ярослав Иванов]

Абубакр: Ну тогда изучайте отрисовку в SVG но про адаптивность я уже писал.

[Абубакр]

Ярослав Иванов: ну, тогда спасибо чтоли

Answer 2

[Андрей Федоров]

codepen.io/aliencash/pen/qNYbAP

Comments

[Ярослав Иванов]

https://monosnap.com/file/RPWjwi3HZ78HK8F4B0yJER0B... :D

[Андрей Федоров]

Ярослав Иванов: И что? Вы не знаете какие там точно должны быть размеры и углы, правда? Задайте исходные, я сделаю как надо.

[Ярослав Иванов]

Андрей Федоров: Эээ... я просто заснял забавный момент. Вы чего))

[Андрей Федоров]

Ярослав Иванов: "А" - Адаптивность. )

[Абубакр]

Андрей Федоров: спасибо