Как сверстать подобную выямку под кнопку?

Question

[Сергей Софьичев]

Помню подобную тему, но утерял ссылку. Средствами CSS

Comments

[Kuat Mustafin]

border: 3px solid #777;

[Kuat Mustafin]

У кнопки сделай бордер

[Сергей Софьичев]

Kuat Mustafin: border это очевидно, но в той выямке находится фон а не просто #цвет.

[Kuat Mustafin]

Сергей Софьичев: точно, не заметил

Answer 1

[Влад Токарев]

Код очень непричесан, но результат рабочий.

Comments

[Игорь Павленко]

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

[Влад Токарев]

Игорь Павленко: честно говоря не вижу больших проблем в использовании таких костылей (мой код легко можно сократить и приукрасить, писал в спешке, но, думаю, основной принцип как сделать понятен).
мне кажется, что проект должен не от дизайна плясать..
Проект - да, не от дизайна, но верстальщик-то именно от дизайна пляшет, выполняя свою задачу. Ему в тонкости проекта лезть не надо, как и руководителям проекта не надо лезть в тонкости верстки.

[Сергей Софьичев]

Игорь Павленко: довольно частво встречаю multiply в макетах, так что этот костыль еще ничего)

Answer 2

[Kuat Mustafin]

codepen.io/kuatmus/pen/dGzzEe как то так

Answer 3

[Степан Кормилин]

Хм.. по-моему это бордер у кнопки просто под цвет и с прозрачностью левого блока?

Comments

[Сергей Софьичев]

там не бордер, там задний фон

Answer 4

[Vlad Tytcky]

codepen.io/vlad7576/pen/NxvvEQ Если нужно, чтобы блок был немного прозрачным, а :after нет, задайте rgba