CODEWITHSUNDEEP
htmlcss
Bert
Bert

Reputation: 55

How to fit an image in a circle where bottom is clipped but top pops out?

I have a parent div that is a circle done in CSS and the child has an image of a headshot. I'm trying to get the head to align with the circle at the bottom but the head extends out of the top edge of the circle, similar to

Rounded clip bottom of image

The circle also has a border similar to the example.

I'm struggling to get it to fit the shape of the circle like that. I've tried using clip-path (I've tried it on a circle, ellipse, and svg mask) that masks the image to give that illusion but I'm not sure if this is the right track and getting it to match the circle's edges is kind of tricky. Any ideas would be appreciated.

Upvotes: 5

Views: 1449

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Two SPAN elements.

The parent one is round with a border,
and the inner one has only rounded the bottom edge. Than playing with margin and the background properties...

.circle-face{
  display: inline-block;
  border: 4px solid #00B9D1;
  border-radius: 50%;
  width: 140px; 
  height: 140px;
  margin-top: 30px;                /* 30px forehead space */
}
.circle-face > *{
  display: inline-block;
  width: 140px;
  height: 170px;                   /* by 30px higher */
  margin-top: -30px;               /* and offset by 30px */
  background: none no-repeat center bottom / 170px;
  border-radius: 0 0 70px 70px;    /* 70 + 70 = 140px width */
  /* box-shadow: 0 0 0 4px red;    /* UNCOMMENT TO SEE THE TRICK */
}
<span class="circle-face">
  <span style="background-image:url(https://i.sstatic.net/bdZeE.png);"></span>
</span>

Upvotes: 6

Related Questions