JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="0" width="0">
    	<defs>
			<clipPath id="clip">
				<path d="M150 0 L75 200 L225 200 Z" />
	    	</clipPath>
		</defs>
    </svg>

    <div id="clipMe"> </div>
    <div class="container">
        <strong>My parent i relative</strong>    
    </div>

CSS

#clipMe {
	clip-path: url(#clip);
	-webkit-clip-path: url(#clip);
	width: 200px;
	height: 200px;
	background-color: red;
    /* -webkit-transform:translateZ(1px); */
}

.container {
	position: relative;
	width: 599px;
	height: 50px;
	background: yellow;
    padding: 10px;
}