<!DOCTYPE html>
<style>
#boxpos {
  position: absolute;
  background-color: green;
}
.box {
  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>