clip-path-with-background-and-box-behind.html

<!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>

chromium/third_party/blink/web_tests/paint/clipath/clip-path-with-background-and-box-behind.html