Search code examples
javascripthtmlcsssassclip-path

Clip-path arc shape


I'm trying to make arc shape of pseudo-element of the parent div, I'm trying to achieve this look by using clip-path, this is simplified example of the look that I'm after:

enter image description here

I'm kinda limited in what I can change in the current markup, background color is dynamic and that's why I need to inherit it in pseudo element and also there is background image in that whole container. That's why I'm trying to do this with pseudo-elements and clip-path. This is what I tried:

div {
  position: relative;
  background: rgba(0,0,0,0.5);
  height: 100px;
  width: 100px;
  margin: 100px auto;
}

div:before {
  content: '';
  position: absolute;
  z-index: 2;
  height: 50px;
  width: 50px;
  right: -50px;
  bottom: 0;
  background: inherit;
  clip-path: polygon(0 100%, 0 0, 3% 15%, 6% 27%, 11% 34%, 19% 43%, 26% 53%, 35% 63%, 46% 71%, 54% 77%, 65% 83%, 70% 86%, 81% 91%, 91% 95%, 100% 100%);
}
<div></div>

But as you can see it's far from perfect, you can see the points and it doesn't have that smooth arc look. I'm using SCSS, also I'm open to any JS suggestions.


Solution

  • This is a job for mask:

    div {
      position: relative;
      background: rgba(0,0,0,0.5);
      height: 100px;
      width: 100px;
      margin: 100px auto;
    }
    
    div:before {
      content: '';
      position: absolute;
      z-index: 2;
      height: 50px;
      width: 50px;
      left:100%;
      bottom: 0;
      background: inherit;
      -webkit-mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
              mask:radial-gradient(farthest-side at top right,transparent 99%,#fff 100%);
    }
    <div></div>