Как сделать срезанные углы у кнопки (градиент)?

#css

Кнопка на фоне из двух прозрачных цветов, before & after:

background-color: rgba(0, 0, 0, 0.3)
background-color: rgba(0, 64, 139, 0.62)


У самой кнопки цвет: #e72e2e

Возможно так сделать?
    

Ответы

Ответ 1

*, *::before, *::after {
  box-sizing: border-box;
}

div {
  display: inline-block;
  margin: 0 10px;
  padding: 0 5px;
  line-height: 38px;
  background: silver;
  position: relative;
  filter: drop-shadow(5px 5px blue);
}

div::before, div:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
}

div::before {
  right: 100%;
  border-right: 10px solid silver;
  border-bottom: 10px solid transparent;
}

div::after {
  left: 100%;
  border-left: 10px solid silver;
  border-top: 10px solid transparent;
}
Just some text


Ответ 2

Можно градиентами и псевдоэлементом.



body{
  background-color: #d7e0ff;
}

button {
  position: relative;
  width: 250px;
  height: 50px;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 9px, red 10px, red 202px,
transparent 203px, transparent);
}

button:before {
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  top: 5px;
  left: 5px;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 9px, #8e0808 10px, #8e0808
202px, transparent 203px, transparent);
  z-index: -1;
}