<section class='wrap' data-descr='initial element + how path is drawn'>
  <div class='no-clip'></div>
  <svg viewbox='0 0 300 300'>
    <defs>
      <clipPath id='cp' clipPathUnits='objectBoundingBox'>
        <polygon points='.4,.3 .1,.5 .4,.7 
                         .4,.3 
                         .6,.3 .9,.5 .6,.7
                         .6,.3'/>
      </clipPath>
    </defs>
    
    <polygon points='120,90 30,150 120,210 
                     120,90 
                     180,90 270,150 180,210 
                     180,90' 
             class='drawing'/>
  </svg>
</section>

<section class='wrap' data-descr='clip: use polygon() function (WebKit/ Blink browsers/ Firefox 49+, Firefox 47-48 behind flag*)'>
  <div class='clip-me'></div>
</section>

<section class='wrap' data-descr='clip: use reference to a <clipPath> element to clip an HTML element (Firefox & WebKit/ Blink browsers)'>
  <div class='clip-me'></div>
</section>

<section class='wrap' data-descr='clip: use reference to a <clipPath> element to clip an SVG <rect> element (works in IE/ pre-Chromium Edge as well)'>
  <svg>
    <rect width='300' height='300' class='clip-me'/>
  </svg>
</section>

@import "compass/css3";

.wrap {
  display: inline-block;
  position: relative;
  margin: 0 4px 3em;
  width: 300px; height: 300px;
  box-shadow: 0 0 2px 2px;
  
  & > * {
    position: absolute;
    top: 0; left: 0;
    width: inherit; height: inherit;
  }
  
  &:nth-child(2) .clip-me {
    clip-path: polygon(
      120px 90px, 30px 150px, 120px 210px, 
      120px 90px, 
      180px 90px, 270px 150px, 180px 210px, 
      180px 90px
    );
  }
  
  &:nth-child(n + 3) .clip-me {
    clip-path: url(#cp);
  }
  
  &:after {
    position: absolute;
    top: 100%;
    padding: .5em 0;
    font: 1em trebuchet ms, verdana, sans-serif;
    content: attr(data-descr);
  }
}

div {
  &.no-clip, &.clip-me {
    background: #222
  }
}

rect { fill: #222 }

.drawing {
  fill: rgba(#be4c39, .01);
  stroke: #da8817;
  stroke-width: 4;
  stroke-dasharray: 795;
  stroke-dashoffset: 795;
  animation: ani 4s linear infinite;
}

@keyframes ani {
  79% { fill: rgba(#be4c39, .01); }
  80%, 100% {
    fill: rgba(#be4c39, .35);
    stroke-dashoffset: 0;
  }
}