Clipping mask in CSS

There are a few variants of clipping masks in CSS. It’s a circle, ellipse, polygon and rectangle (Basic shapes, clip-path).

 .circle {
  clip-path: circle(100px at center);
 }
 .ellipse {
  clip-path: ellipse(100px 80px at 100px 120px);
 }
 .polygon {
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
 }
clip-path

It is also possible to create more curved figure but through svg-mask.

HTML:

<svg width="100%" height="300px">
 <clipPath id="clip">
  <path d="M200,60c-27.614,0-50,22.448-50,50.139C150,82.448,127.614,60,100,60s-50,22.448-50,50.139C50,170.306,150,240,150,240s100-69.694,100-129.861C250,82.448,227.614,60,200,60z"/>
 </clipPath>
</svg>

CSS:

.clip-svg {
 -webkit-clip-path: url(#clip);
}
svg_mask

There are two options. The first one is making clipping mask through the clip-path and the second one is using svg-file. The problem is that the size of the clipping mask is fixed. And the clipping mask can’t be assigned in per cents needed.

Links: