Как сделать выемки в форме блока?

Question

[kopvi64]

Как лучше реализовать такую форму блока? Подскажите, пожалуйста. Сначала думал псевдоэлементами, но если делать на каждую выемку, не знаю правильно ли это будет да и запутано как-то, потом думал бэкграундом сделать и вставлять их картинкой, но не хотелось бы ради такой незамысловатой формы выемки, усложнять все настолько. Кажется, что есть вариант намного проще, но я сам не могу догадаться....

Comments

[Вадим]

Так как у Вас там ещё и тень, то картинка выглядит самым простым и доступным способом

[kopvi64]

Вадим, Вы имеете ввиду сделать сделать фон для блока одной белой картинкой уже с вырезами?

[Вадим]

kopvi64, Одна белая картинка - это недостаточно гибко.
Тут скорее олдскульный подход:
Картинка для левой грани, картинка для правой грани и однопиксельная полосочка с репитом для заполнения.

Answer 1

[Wallex]

Большой полукруг можно реализовать через before, из него делаешь то же полукруг(то есть рисуешь).
Маленькие, есть два варианта
1. В фотошопе вырезать тут часть как png, завернуть в отдельный блок и приклеить его к основному
2. Ну или по отдельности их делать и там уже клей их

Или вообще сделай белый фон бэкграундом + там есть еще тень

Лично я бы отталкивался от того варианта, как бы этот блок выглядел под моб устройства. Так как, тебе его адаптировать, чтоб в дальнейшем было легче

Comments

[kopvi64]

Спасибо большое!

Answer 2

[Олег]

Comments

[Игорь Махов]

А где-то можно научиться делать такие крутые штуки на CSS или это только практика и опыт?

[Олег]

Игорь Махов, За несколько лет - адекватный вопрос в ответе! Это не назвать практикой, не назвать опытом. Но при этом нужно думать, ДАЖЕ в html, css. Постоянно читать, интересоваться не только ПО НУЖДЕ)
Программирование, это не сайт за час. Надеюсь вам это понятно.