Как сделать такую фигуру?

Question

[sanekstr]

Здравствуйте подскажите как сделать такую фигуру?

Спасибо.

Answer 1

[GreatRash]

codepen.io/GreatRash/pen/VeREve

Мегаизврат конечно, проверял только в Хроме, но вроде должно работать во всех современных браузерах.

Answer 2

[Михаил Чирский]

На чистом CSS не уверен, что получится, хотя помучится можно, лучше используйте SVG в нем можно любые фигуры делать.

Вот хороший пример у Юли на сайте: css.yoksel.ru/css-and-svg-masks, что умеет SVG

Answer 3

[r1ch]

сделать кнопке фоновую картинку с прозрачностью.

Answer 4

[BMO1337]

В фотошопе нарисуй.

Answer 5

[Даниил Игоревич]

Если только CSS, то в голову ничего не приходит, кроме возможности обрезать кнопку при помощи clip-path, но через polygon, насколько я знаю, так идеально круг не выделишь. Если не планируется менять изображение, то можно кнопку через фотошоп нарисовать, но способ вроде так себе.

Comments

[sanekstr]

А если не css только использовать?

Answer 6

[kn1ght_t]

сделай левую и правую часть спрайтом и ставь к прямоугольной области по бокам

Comments

[sanekstr]

Спасибо, но не подходит

Answer 7

[Павел Воронюк]

если только вот так...
codepen.io/anon/pen/PZLKBG

как тут добится прозрачности хз(

Но на белом(или другом фоне) выглядит нормально)

Comments

[sanekstr]

Спасибо, но не подходит