<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='0,0 1,0 1,1 0,1 
                         0,0 
                         .1,.1 .5,.5 .9,.1
                         .1,.1'/>
      </clipPath>
    </defs>
    
    <polygon points='0,0 300,0 300,300 0,300 
                     0,0 
                     30,30 150,150 270,30
                     30,30' 
             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: 4px 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(
      0 0, 300px 0, 300px 300px, 0 300px,
      0 0, 
      30px 30px, 150px 150px, 270px 30px,
      30px 30px
    );
  }
  
  &: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: 1870;
  stroke-dashoffset: 1870;
  animation: ani 4s linear infinite;
}

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