JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<svg viewBox="0 0 100 100">
  <clipPath id="shape">
    <path d="M0 0L60 0L45 10L0 10"/>
  </clipPath>
  
  <text fill="#000" y="7" font-size="8" >
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, cupiditate.
  </text>
  
  <rect x=0 y=0 width=100 height=10 fill="#000" clip-path="url(#shape)" />
  
  <text fill="#f00" y="7" font-size="8" clip-path="url(#shape)">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, cupiditate.
  </text>
  
  
</svg>