<div class="el1">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo cupiditate repellendus distinctio atque, sit ab sed? Labore doloremque hic nostrum, aliquid non commodi harum ea adipisci rerum nihil error vitae nulla voluptatum dolorum facere modi a eveniet, quas ipsa. At?
</div>
  <br>
<div class="el2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit quidem eos nobis repellat nostrum, dolorum adipisci ea autem sapiente!</div>

body {
  margin: 0;
  padding: 10px;
}

.el1 {
  filter: drop-shadow(-20px 0 0 #b5c0e1) drop-shadow(-20px 0 0 #d1d8ec);
  position: relative;
  z-index: 0;
  height: 10vh;
  min-height: 150px;
  padding: 20px 20px 20px 100px;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
}

.el1:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 40px;
  background: #899dd1;
  z-index: -1;
    background-size: cover;
clip-path: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 50%);
}

.el2 {
filter: drop-shadow(20px 0 0 #ffb63f) drop-shadow(20px 0 0 #ffc466) drop-shadow(20px 0 0 #ffdaa1);
  padding-bottom: 100px;
  overflow: hidden;
  padding: 10px 80px 10px 10px;
  position: relative;
  z-index: 0;
  height: 10vh;
  min-height: 60px;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
}

.el2:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 60px;
  bottom: 0;
  left: 0;
  background: #ffae24;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}