How to use CSS to set a half circle in the center of an image?

Question

Is it possible to set CSS like this in any image?

I need to create an image with this half circle effect in the image. Is it possible to do with CSS?

Could you provide a little more information around what you're looking at doing? For example, did you want the half circle to line up with the top of the image? — Alex Mulchinock, Apr 24 '18 at 16:34

score 3 · Answer 1 · answered Apr 24 '18 at 17:32

3

Because GRADIENTS FTW

div{
  display: inline-block;
  color: white;
  padding: 40px 50px 20px;
  background: radial-gradient(circle at top, white 14px, #0091C9 15px);
  border-radius: 10px 10px 0 0;
}

<div>WOOHOO</div>

answered Apr 24 '18 at 17:32

GuCier

6,919
1
29
36

benams · Accepted Answer · 2018-04-24T17:04:42.680

2

use border-radius (change the size values and colors according to your needs)

#cont {
  width: 250px;
  height: 150px;
  background: navy;
  position: relative;
  border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  text-align: center;
}

.text {
  color: white;
  font-weight: 900;
  position: absolute;
  top: 60px;
  right:0;
  left:0;
  text-align: center;
}

.circle {
  background: white;
  position: absolute;
  top: -15px;
  left: 110px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

<div id="cont">
<div class="circle"></div>
<div class="text"> Text</div>
</div>

edited Apr 24 '18 at 17:04

answered Apr 24 '18 at 16:51

benams

4,308
9
32
74

Thank you so much its working well :) – dhara chauhan Apr 25 '18 at 08:58
@dharachauhan you can mark it as the answer, by click the V button below the rank section (left to the answer itself) – benams Apr 25 '18 at 09:57

How to use CSS to set a half circle in the center of an image?

2 Answers2