JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<span>100</span>


<header>
  <!-- no markup change... -->
</header>

CSS

span:before {
  content: '$';
}

header {
  min-height: 300px;
  background: lighgray;
  
  position: relative; /* to create a boundary for the absolute children */
}

header:before {
  content: ''; 
  /* has to have something in 'content' or :before and :after don't work */
  display: block;
  width: 100%;
  height: 200px;
  position: absolute;
  /* positioned based on closest relative parent */
  top: 0;
  left: 0;
  background: red; /* could be an image or gradient or many things */
  background-image: url('https://am23.akamaized.net/tms/cnt/uploads/2015/04/Revenge-of-the-Nerds-1984-revenge-of-the-nerds-11710197-950-534.jpg');
  background-size: cover;
  
  -webkit-clip-path: polygon(100% 0, 100% 28%, 51% 51%, 0 29%, 0 0);
  clip-path: polygon(100% 0, 100% 28%, 50% 50%, 0 29%, 0 0);
}