Create A Shape With Pure Css

How can I create the following shape with pure CSS ? I have been searching for this all around but could not find a proper answer.

Solution 1:

Here is an idea with one element and gradient. You will also have transparency and you can adjust the curve by adjusting the size of the gradient:

.box {
  width:200px;
  height:100px;
  margin:20px;
  display:inline-block;
  border:2px solid #ffff;
  border-right:none;
  background:
    radial-gradient(circle at right,transparent 22%,#fff22%,#fffcalc(22% + 2px), red calc(22% + 3px)) 50%100%/var(--d,110%) 100% no-repeat
}

body {
 background:pink;
}

<divclass="box"></div><divclass="box"style="--d:120%"></div><divclass="box"style="--d:130%"></div><divclass="box"style="--d:140%"></div>

Solution 2:

Use pseudo element and in :after create circle shape

body{
background:black;
}
.banner{
height:120px;
width:450px;
background:#990000;
border:2px solid white;
border-radius: 3px;
}
.banner:after{
content: "";
    position: absolute;
    border-radius: 50%;
    background: black;
    top: 10px;
    right: 139px;
    width: 77px;
    height: 120px;
    border-left: 4px solid white;
}

<divclass="banner"></div>