Как правильнее сверстать оранжевые закругления на кнопке, по левому верхнему и правому нижнему углу?

Question

[Владимир]

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

Answer 1

[Eugene Chefranov]

Comments

[Владимир]

Спасибо

Answer 2

[азаза]

Через before

Answer 3

[Антон]

Грубо, добъете сами

Answer 4

[alex-1917]

В одном из ответов избыточный код, адекватнее надо кодить, адекватнее:
Было:

.btn:before {
  content: '';
  display: block;
  border-left: 2px solid #ed6a37;
  border-top: 2px solid #ed6a37;
  border-top-left-radius: 25px;
  width: 25px;
  height: 25px;
  position: absolute;
  top: -7px;
  left: -7px;
  transition: all 0.5s;
}

.btn:after {
  content: '';
  display: block;
  border-right: 2px solid #ed6a37;
  border-bottom: 2px solid #ed6a37;
  border-bottom-right-radius: 25px;
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: -7px;
  right: -7px;
  transition: all 0.5s;
}

Стало:

.btn:before,.btn:after {
content: '';
color:#ed6a37;
border-style:solid;
border-top-left-radius: 25px;
width: 25px;
height: 25px;
position: absolute;
transition: all 0.5s;
}
.btn:before {
border-width:2px 0 0 2px;
border-top-left-radius: 25px;
top: -7px;
left: -7px;
}

.btn:after {
border-width:0 2px 2px 0;
border-bottom-right-radius: 25px;
bottom: -7px;
right: -7px;
}

И еще чуть посожмём:

.btn:before,.btn:after{content:'';color:#ed6a37;border-style:solid;border-top-left-radius:25px;width:25px;height:25px;position:absolute;transition:all .5s}
.btn:before{border-width:2px 0 0 2px;border-top-left-radius:25px;top:-7px;left:-7px}
.btn:after{border-width:0 2px 2px 0;border-bottom-right-radius:25px;bottom:-7px;right:-7px}