Срезанные углы

by Ankhena

HTML

<div>
</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #00f;
}

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%);
}