JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<div class="target">
    <div class="inside">&#65279;</div></div>


<svg height="0">
    <clipPath id="c1" clipPathUnits="objectBoundingBox">
        <rect x="1"  width="1.0" height="1.0" transform="rotate(45)"/>
    </clipPath>
  </svg>

CSS

.target { clip-path: url(#c1); 
background:red;
height:300px;
width:300px;
margin:200px;
padding: 20px}

.inside {background:blue; height: 300px;}