<!DOCTYPE html> | |
<style> | |
#boxpos { | |
position: absolute; | |
background-color: green; | |
} | |
.box { | |
will-change: transform; | |
position: relative; | |
-webkit-clip-path: url(#equitri); | |
height: 100px; | |
width: 100px; | |
background: red; | |
} | |
</style> | |
<div id="boxpos"> | |
<div class="box"></div> | |
</div> | |
<svg id="tri"> | |
<clipPath id="equitri" clipPathUnits="objectBoundingBox"> | |
<polygon points=".5 0, 0 .86, 1 .86, .5 0" /> | |
</clipPath> | |
</svg> |