<section>
  <h1 class="ribbon">Main title</h1>
  <p>Dragée powder bear claw tiramisu pudding gummi bears wafer. Macaroon chocolate cake cake marzipan icing carrot cake macaroon sweet. Lemon drops </p>
</section>
<section>
  <h2 class="ribbon" style="--c: #4ECDC4">Second title</h2>
  <p >Pie pastry macaroon candy tootsie roll jujubes pudding pie. Jelly-o chocolate cake pastry gingerbread brownie danish liquorice chocolate cake. Jelly beans donut cupcake danish croissant liquorice. Cotton candy brownie croissant pie toffee. Cotton candy chocolate cake gummi bears ice cream jelly fruitcake caramels. Shortbread ice cream bear claw gingerbread chocolate cake jelly-o cake caramels soufflé.</p>
</section>
<section>
  <h3  class="ribbon" style="--c: #542437; color: #fff;">Small title</h3>
  <p>Pie pastry macaroon candy tootsie roll jujubes pudding pie. gingerbread brownie danish liquorice chocolate cake. Jelly beans donut cupcake danish croissant liquorice.</p>
</section>

.ribbon {
  --c: #C7F464;
  
  border-image: 
     conic-gradient(from 45deg at calc(100% - 1lh),#0000 25%,var(--c) 0) 
     fill 0//0 0 0 100vw;
  padding-right: 1.3lh;
  line-height: 1.5em; /* control the height */ 
  width: fit-content; /* you probably don't need this if your element is already shrink-to-fit*/
}

@supports not (padding: 1lh) { /* in case the lh unit is not available fallback to em */
  .ribbon {
    border-image: 
       conic-gradient(from 45deg at calc(100% - 1.5em) 50%,#0000 25%,var(--c) 0) 
       fill 0//0 0 0 100vw;
    padding-right: 2em; 
  }
}

section {
  /* center + max-width:800px + min-margin: 10px */
  margin: 50px max(10px, 50% - 800px/2);
}
body {
  font-family: system-ui, sans-serif;
  background: #eee;
}
h1 {
  font-size: 3rem;
}
p {
  font-size: 1.5rem;
  text-align:justify;
}