<div class="ribbon">
  <div class="ribbon__left"></div>
  <div class="ribbon__center">Lorem ipsum dolor sit amet consectetur.</div>
  <div class="ribbon__right"></div>
</div>

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
  background: #f6efea;
  overflow: hidden;
}

.ribbon {
  --width: 75%;
  --primary: #8e2a23;
  --darken-primary: #6f231d;
  --shadow: #3c120f;
  --vertical-offset: 20px;
  --horizontal-offset: 20px;

  position: relative;
  width: 100%;
}

.ribbon__left,
.ribbon__right {
  position: absolute;
  top: calc(var(--vertical-offset) * -1);
  width: calc((100% - var(--width)) / 2 + var(--horizontal-offset)); 
  height: 100%;
  background: var(--darken-primary);
  z-index: 1;
}

.ribbon__left {
  left: 0;
}

.ribbon__right {
  right: 0;
}

.ribbon__center {
  position: relative;
  width: var(--width);
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  background: var(--primary);
  color: #ffffff;
  z-index: 2;
}

.ribbon__center::before,
.ribbon__center::after {
  position: absolute;
  bottom: 100%;
  width: var(--horizontal-offset);
  height: var(--vertical-offset);
  background: var(--shadow);
  content: '';
}

.ribbon__center::before {
  left: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.ribbon__center::after {
  right: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}