How to make a CSS3 Clip Path

Question

I want to make figure 1

like as figure 2

using clip path, is it possible?

thanks.

Have a look at this - http://stackoverflow.com/questions/23758922/transparent-arrow-triangle/23759602#23759602. The output produced is similar to what you need even though it doesn't use clip-path. Unless you are planning to use SVG clip-path, I would recommend the approach described in the linked thread because CSS only clip-path has very low browser support. — Harry, Sep 15 '15 at 06:51

Stewartside · Accepted Answer · 2015-09-15T09:40:57.970

clip-path is still a very experimental CSS3 element and therefore isn't very well supported and what support there is is minimal.

Using the CSS3 clip-path element to generate the polygon only allows for straight corners as its all point based rather than allowing for curves.

Heres an example:

body {
  background: #555;
  margin: 0;
}
img {
  -webkit-clip-path: polygon(98% 0, 100% 2%, 100% 88%, 98% 90%, 25% 90%, 20% 99%, 15% 90%, 2% 90%, 0 88%, 0 2%, 2% 0);
  clip-path: polygon(98% 0, 100% 2%, 100% 88%, 98% 90%, 25% 90%, 20% 99%, 15% 90%, 3% 90%, 0 88%, 0 2%, 2% 0);
}

<img src="http://lorempixel.com/200/200/" />

Your best alternative would be to use an actual SVG element and reference it within the CSS to do the cut out. If you want a perfect shape but sadly no support on IE, this is the way to go.

SVG Only Version

body {
  background: #555;
  margin: 0;
}
img {
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
    </clipPath>
  </defs>
</svg>

<img src="http://lorempixel.com/500/500/" />

How to make a CSS3 Clip Path

1 Answers1