Having problem making image a certain shape with css

Question

I'm trying to make a normal shaped image be transformed into the following shape when uploaded to my website:

Using the following css i managed to get something close to this:

.img {
  position: absolute;
  left: 0px;
  top: -10rem;
  width: 100%;
  height: 100%;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 45%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}

But it doesn't really look circular at the bottom and right side., the shape comes out odd.

I basically want the CSS to transform any shaped image uploaded into the right angle/circle shape attached, but I'm struggling. Any help appreciated.

GreyRoofPigeon · Answer 1 · 2020-09-15T15:06:58.713

2

You mean like this??

.box {
  width: 400px;
  height: 400px;
  border: 1px solid blue;
  overflow: hidden;
}

.circle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  top: -150px;
  left: -150px;
}

<div class="box">
  <div class="circle"> </div>
</div>

edited Sep 15 '20 at 15:06

answered Sep 15 '20 at 14:58

GreyRoofPigeon

17,833
4
36
59

That just makes the image a circle, I need the top corner of it to be a right angle. – Anthony Sep 15 '20 at 15:00
1

Then we need to put the circle in a box. Check the updated answer – GreyRoofPigeon Sep 15 '20 at 15:07

score 2 · Accepted Answer · answered Sep 15 '20 at 15:18

2

You can use css clipping masks to cut the image into shape.

clip-path: circle(60% at 30% 30%);

If you need help creating the mask, use clippy.

answered Sep 15 '20 at 15:18

Kiran Wells

71
6

Just what I needed! Thanks. – Anthony Sep 15 '20 at 16:10

Having problem making image a certain shape with css

2 Answers2