Как сделать вогнутые уголки у блока с помощью css?

Question

[Мариана Марианова]

Как сделать вот такие вот уголки с помощью css?


P.S. Это картинка, верстки самой нет.

Answer 1

[lnked]

Так можно

Answer 2

[Михаил Захаров]

Верхний и нижний бордюры задаются через css, а слева и справа - это спрайты (картинки). А вообще, откройте код элемента и посмотрите стили )

Кстати, можно все это сделать на css. Но для этого сама кнопка должна быть overflow:hidden и с бордюром, а внутри нее с абсолютным позиционированием четыре круга по углам с таким же бордюром как у кнопки )

Comments

[Мариана Марианова]

Код посмотреть возможности нет, есть только картинка.
Ваш способ можно попробовать, хотя и довольно долгий)

[Михаил Захаров]

Марина Галий: Он не долгий - достаточно у кнопок сделать before и after и в них бэком засунуть эти спрайты. Так и делают, между прочим )

[Михаил Захаров]

Марина Галий: вот код, специально для вас. Сделал. Понятное дело, что блоки замените на свои. Важно понять стилистику. клац

[Мариана Марианова]

Михаил Захаров: тоже пробую в этом редакторе сделать) спасибо большое)

[Мариана Марианова]

а если фон у body будет в виде картинки https://jsfiddle.net/thmsgapr/1/ ? то какой тогда background нужно прописывать кружку?

[Михаил Захаров]

Марина Галий: Ну либо максимально приближенный к фону картинки, либо через спрайты. Сделать прозрачным не получится, иначе будут видны рамки кнопки. А вообще бэк у кружков = бэку body )

Answer 3

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

https://codepen.io/aliencash/pen/VWOxMB

Answer 4

[Антон Антон]

https://habrahabr.ru/post/259603/

Comments

[Мариана Марианова]

способ хороший, но это только для картинок. Мне нужно чтобы можно было применить к блоку.