Cross-Browser Clip-Path

Bringing clip-paths to IE with SVGs

by Federico Tibaldo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<header class="relative h-64 overflow-hidden">

  <div class="container mx-auto relative h-full">
    <h1 class="text-2xl text-white uppercase tracking-wider font-bold absolute center-y left-0 z-10 w-3/4 md:w-1/2 p-8">
      Trustworthy <br>
      Pineapples
    </h1>
  </div>

  <div class="z-0 square w-3/4 md:w-1/2 absolute left-0 center-y" aria-hidden="true">

    <svg class="absolute left-0 top-0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <clipPath id="circleClipPath" clipPathUnits="userSpaceOnUse">
          <circle cx="-100%" cy="0" r="200%" id="circle" />
        </clipPath>

        <linearGradient id="gradient" x1="0.5" y1="1" x2="0" y2="0">
          <stop offset="-50%" stop-color="hsl(210,80%,80%)" stop-opacity=".2" />
          <stop offset="150%" stop-color="hsl(210,90%,40%)" stop-opacity="1" />
        </linearGradient>
      </defs>

      <image
        xlink:href="https://picsum.photos/800/800"
        src="https://picsum.photos/800/600"
        clip-path="url(#circleClipPath)"
        width="100%" height="100%">
      </image>
        
      <rect
        x="0" y="0"
        height="100%" width="100%"
        clip-path="url(#circleClipPath)"
        fill="url(#gradient)">
      </rect>
    </svg>

  </div>

</header>

CSS

.square::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.center-y {
  top: 50%;
  transform: translateY(-50%);
}