How can you create such a shape using css?

Question

How to create a circle background and crop it in div?

Temani Afif · Accepted Answer · 2021-09-20 19:53:34Z

2

a simple clip-path can do it:

.box {
  width:300px;
  height:150px;
  background:lightblue;
  clip-path:circle(farthest-side);
}

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

Or a radial-gradient

.box {
  width:300px;
  height:150px;
  background:radial-gradient(circle farthest-side,lightblue 98%,#0000);
}

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

answered Sep 20, 2021 at 19:53

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Azu · Accepted Answer · 2021-09-20 19:00:03Z

0

.container {
    width: 320px;
    height: 160px;
    overflow:hidden;
}
.circle {
    background-color: #aad2dd;
    border-radius: 50%; 
    width: 320px;
    height: 320px;
    margin-top: -80px;
}

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

answered Sep 20, 2021 at 19:00

Azu

1,5562 gold badges9 silver badges14 bronze badges

Collectives™ on Stack Overflow

How can you create such a shape using css?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related