Как сделать такое скругление?

Question

[hesrun]

Всем привет!
Есть ли какое-то решение сделать обратное скругление?
https://monosnap.com/file/WWIhTnqRqUjfquuCrkRP59nU...
В мысли пока приходит пока только верхнюю полосу вырезать и вставить картинкой...

Comments

[Вадим]

либо картинкой, либо маской

Answer 1

[Ankhena]

Вам поможет
https://jsfiddle.net/Ankhena/wj102v8e/2/
https://jsfiddle.net/Ankhena/wkdfngyu/
https://jsfiddle.net/Ankhena/5wvr2x4q/
https://jsfiddle.net/Ankhena/kLr7onyb/

Answer 2

[doctor__23]

Скорее всего никак, потому что на background стоит картинка.

Был бы bg-color (например, черный #000), то можно было бы сделать кнопку вот такой:

button {
    width: 300px;
    height: 50px;
    background-color: #7c65ab;
    border: 10px solid #000;
    border-radius: 30px;
}

Не было бы картинки на главной фоне, код бы проканал :)

Answer 3

[Лев Александров]

Можно бэкграундом поставить такую картинку, а кнопку абсолютно спозиционировать
Еще можно попробовать clip

Answer 4

[Andrw_t]

Конечно можно, на чистом ccs без всяких картинок и так далее. border-radius в помощ