CODEWITHSUNDEEP
css
O B.
O B.

Reputation: 13

CSS half circle background

What I am trying to achieve: image link

What my code currently looks like:

.half-circle {
  background-color: white;
}
<div style="background-color: black;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should't be moved</div>

I've tried using padding with a white background and 500 radius, but it pushes the text down.

Upvotes: 0

Views: 2149

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105853

You can take a look at radial-gradient() and tune a bit the sizing 

.half-circle {
  min-height: 12vw;
  padding-bottom: 4%;
  background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}

.half-circle img {
  display: block;
  margin: auto;
  max-width: 15vw
}
<div style="background-color: black;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should'nt be moved</div>

Upvotes: 1

mmshr
mmshr

Reputation: 947

This can be achieved with CSS if you give your .half-circle a border-bottom-left-radius and border-bottom-right-radius. That will round the bottom corners of the shape into a half circle. I also added some extra style to match your screenshot a little better.

.container {
  padding-bottom: 10px;
  text-align: center;
}

.half-circle {
  background-color: white;
  margin: 0 auto;
  height: 100px;
  width: 400px;
  border-bottom-left-radius: 800px;
  border-bottom-right-radius: 800px;
  padding: 10px 0 20px;
  text-align: center;
}
   
img {
  max-height: 100%;
  width: auto;
}
<div class="container" style="background-color: #000;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should't be moved</div>

Upvotes: 0

Related Questions