Абсолютное позиционирование, вырезание картинок, before/after... Ох и понапридумывают всякого...
.example {
background: linear-gradient(to right, #F0F3BD, #F0F3BD), // левая граница
linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // верхняя
linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // нижняя
linear-gradient(to right, #fff, #fff); // правая
background-size: .5rem 100%, 100% .5rem, 100% .5rem, .5rem 100%;
background-position: top left, top left, bottom left, top right;
background-repeat: no-repeat;
}
Один элемент. Один фон. Для всего остального есть CSS.
codepen