Circle clip path-CodePudding

I have a circular image. I want to cut the top of it as I have shown in the picture. Is it possible to do this with clip path?

Thanks.

.circle {
  width: 75px;
  height: 75px;
  background-color: red;
  border-radius: 50%;
}

<div >

</div>

CodePudding user response：

Yes you could use the inset() CSS function :

.circle {
  width: 75px;
  height: 75px;
  background-color: red;
  border-radius: 50%;
  clip-path: inset(20px 0 0 0);
}

<div >

</div>

CodePudding user response：

mask can also do it:

.circle {
  width: 75px;
  height: 75px;
  background-color: red;
  border-radius: 50%;
  -webkit-mask: linear-gradient(#0000 20%,#000 0);
}

<div >

</div>