SVG Clip

by cleaver

HTML

<svg width="700" height="550">
  <defs>
    <clipPath id="shape">
      <path d="M100,0 L700,0 L700,550 L0,550 Q0,275 200,0"></path>
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#shape)" width="100%" height="100%">
    <div class="shaped"></div>
  </foreignObject>
</svg>

CSS

.shaped {
  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
  height: 384px;
  width: 100%;
}