Как срезать такой угол?

Question

[someserj]

нужно срезать желтый градиентный блок. синий - это фон родителя

Answer 1

[Ankhena]

https://jsfiddle.net/Ankhena/Lqsftvxd/

div {
  position: relative;
  width: 80%;
  height: 200px;
  margin: auto;
  background: linear-gradient(to bottom, yellow, orange);
}

div::before,
div::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 50px;
}

div::before {
  background: linear-gradient(to right top, #00f 49.3%, transparent 50.8%);
}

div::after {
  right: 0;
  background: linear-gradient(to left top, #00f 49.3%, transparent 50.8%);
}

Answer 2

[Дима Паутов]

Создаём 2 блока, :before, :after. Позиционируем и поворачиваем каждый. Готово

Answer 3

[NaN]

webdiz.com.ua/figury/kak-srezat-ugly-na-css