title: Using CSS borders to create shapes with pseudo-elements with same height as parent
body: <p>I am trying to create "ribbon" headings for my website.</p>
  
  <p>This is what I've been able to mock up so far.</p>
  
  <p>This works properly with short headings (for some value of short), but fails when the headings want to wrap. Is it possible to use the border method of creating the "swallowtail" shape but have the border widths of the <code>:after</code> pseudo-elements be related to the height of the parent instead of hard-coded without resorting to scripting?</p>
  
  <p>Is there an alternative approach to be taken to achieve a similar visual effect?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, div { margin: 0; }
  body { background: lightgrey; }
  .wrapper {
      background: white;
      padding: 2em;
      padding-top: 0;
      margin: 2em;
      margin: 2em auto;
      width: 80%;
  }
  .ribbon {
      font-size: 32px;
      line-height: 1.5em;
      display: inline-block;
      font-family: Optima;
      color: white;
      background: #9c0000;
      margin: 0;
      position: relative;
      width: 100%;
      padding: 1em;
      padding-left: 1.5em;
      left: -1.5em;
      filter: drop-shadow(5px 5px 3px grey);
      -webkit-filter: drop-shadow(5px 5px 3px grey);
      -moz-filter: drop-shadow(5px 5px 3px grey);
      margin-top: 1em;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
  }
  .ribbon-bot:before {
      position: absolute;
      height: 0;
      width: 0;
      content: "";
      border-color: red green blue yellow;
      border-color: #4d0000 #4d0000 transparent transparent;
      border-style: solid;
      border-width: 0.1em 0.25em 0.1em 0.25em;
      left: 0em;
      bottom: -0.199375em;
  }
  .ribbon-top:before {
      position: absolute;
      height: 0;
      width: 0;
      content: "";
      border-color: transparent #4d0000 #4d0000 transparent;
      border-style: solid;
      border-width: 0.1em 0.25em 0.1em 0.25em;
      left: 0em;
      top: -0.199375em;
  }
  .ribbon:after {
      position: absolute;
      width: 0;
      right: -20px;
      bottom: 0px;
      content: "";
      border-color: #9c0000 transparent #9c0000;
      border-width: 1.75em 20px 1.75em 0;
      border-style: solid;
      z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="ribbon ribbon-bot"&gt;Ribbon&lt;/div&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non mi libero. Nam 
  ultrices malesuada nulla, eu faucibus eros. Nulla non est odio. Maecenas 
  vulputate nec sem vitae viverra. In vitae dapibus purus. Morbi mattis mi nulla, 
  sed iaculis justo mollis et. Integer porttitor augue nisl, ac auctor nisl 
  posuere vitae. Praesent at ligula fermentum, maximus mi ac, vehicula mi. Nam 
  ligula mi, suscipit id dictum nec, varius sagittis nisl. Lorem ipsum dolor sit 
  amet, consectetur adipiscing elit. Suspendisse consequat ipsum a nibh imperdiet 
  interdum.&lt;/p&gt;
  
          &lt;div class="ribbon ribbon-top"&gt;A Moderately Long Heading Goes Here A Moderately Long Heading Goes Here&lt;/div&gt;
          &lt;p&gt;Donec venenatis ante tellus, venenatis consectetur arcu sagittis at. Phasellus 
  eu neque a dolor porta rutrum et ac lorem. Nulla ornare nisl quis est lacinia 
  vehicula. Sed elementum ante elit, interdum porta elit tristique ac. Praesent 
  felis dolor, luctus elementum nisi non, vehicula aliquet mauris. Vestibulum 
  fermentum erat nibh, in facilisis lorem bibendum sed. Phasellus condimentum 
  pharetra quam, et placerat massa auctor nec. Mauris fringilla hendrerit lectus, 
  nec congue elit semper tempus. Pellentesque convallis interdum ligula, et 
  faucibus nulla vulputate eget. Donec mattis orci at leo fringilla mollis.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>