DIV with curvy sides and curved insets using CSS

Question

I'm building a HTML template which looks something like this. I can do this with an svg background, but I'm trying to build this with pure CSS.

Here's what I implemented till now. How to get rid of the sharp edges of rectangle around the cirle? Thanks in advance.

.parent {
  --parent-size: 150px;
  width: var(--parent-size);
  height: var(--parent-size);
  background: red;
  position: relative;
  margin-top: 50px;
}
.child {
  --circle-size: 70px;
  width: var(--circle-size);
  height: var(--circle-size);
  background: green;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -35px;
  border: 3px solid white;
}

<div class="parent">
  <div class="child"></div>
</div>

Target:

Whoever voted to close. There's no real reason as the question is legit. Check the answer below that shows a general approach — Shaunak, Aug 11 '22 at 04:59
@Shaunak a legit question doesn't make it immune to be closed as duplicate if the question was already asked before — Temani Afif, Aug 11 '22 at 08:28
@TemaniAfif def not the same, this question is very specific on what it needs. — Shaunak, Aug 11 '22 at 15:22
yes. duplicate questions are valuable resources to bring to the attention of new users. however, this is a pretty specific request, well-crafted question (yes, with some overlap of older questions). probably better to err on the side of actually encouraging new users to build the community, don't you think? — Andrew, Aug 11 '22 at 15:39
@Andrew how this is different from the duplicate? I found a duplicate with the exact same layout that have many different answers. Plus we don't want a question per specific requirement. You want to create a curve I redirect you to a question with different methods to create a curve and you have to do the effort to check the code, understand it and update it for your needs. That's the purpose of duplicate questions — Temani Afif, Aug 11 '22 at 19:38

Shaunak · Answer 1 · 2022-08-11T05:00:03.880

Warning: this is a close approximation to show the general approach. You will have to tweak the values to get exactly the shapes you need.

The child-outer class needs a bit more height adjustment, but here's the basic idea of how to get to what you want ( kind of ). SVG is still the more polished way to go

Check the preview in full screen though :)

body{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100vh;
  width:100%;
  background: #15172b;
  padding-top: 100px;
}

.parent{
 z-index: 1;
   background: #1c2035;
  width: 586px;
  height: 200px;
  border-radius: 30px 30px 0 0;
  position:relative;
}

.overlay {
  z-index:3;
  width: 586px;
  height: 200px;
  background: #15172b;
  position: absolute;
  top:-204px;
}

.left{
  border-left: 4px solid #2e3247;
  border-top: 4px solid #2e3247;
  border-radius: 30px 30px 0 0;
  background: #1c2035;
  height: 200px;
  width: 180px;
  position:absolute;
  top: -4px;
  left: -4px;
}

.right{
  border-right: 4px solid #2e3247;
  border-top: 4px solid #2e3247;
  border-radius: 30px 30px 0 0;
  background: #1c2035;
  height: 200px;
  width: 180px;
  position:absolute;
  top: -4px;
  right: -4px;
}

.child {
  z-index: 4;
  --circle-size: 80px;
  width: var(--circle-size);
  height: var(--circle-size);
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -129px;
  border: 45px solid #25183e;
}

.child-border {
  z-index: 4;
  --circle-size: 166px;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -129px;
  border: 4px solid #2e3247;
}

.child-outer {
  z-index: 2;
  --circle-size: 261px; 
  width: var(--circle-size);
  height: var(--circle-size);
  background: #15172b;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -179.5px;
  border-bottom: 5px solid #2e3247;
}

<div class="parent">
  <div class="left"></div>
  <div class="child"></div>
  <div class="child-border"></div>
  <div class="child-outer"></div>
  <div class="right"></div>
  <div class="overlay"></div>
</div>

score 1 · Answer 2 · answered Aug 11 '22 at 05:14

https://codepen.io/Chokcoco/pen/JjroBPo

I found a demo may help you. Please give the author a love! That's awesome!

The key to get the effect is using tow filter constrast() and blur(). They will make the touched edge more smooth.

.container {
  position: relative;
}

.c1, .c2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000000;
}

.c2 {
  background-color: #000000;
  position: absolute;
  left: 80px;
}

.mixin {
  overflow: hidden;
  background-color: #FFFFFF;
  filter: contrast(20);
}

.mixin > * {
  filter: blur(10px);
}

<p>normal</p>

<div class="container">
  <div class="c1"></div>
  <div class="c2"></div>
<div>

<p>filter</p>

<div class="container mixin">
  <div class="c1"></div>
  <div class="c2"></div>
</div>

DIV with curvy sides and curved insets using CSS

2 Answers2