Create a shape with pure CSS [closed]

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.

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers
2

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%,#fff 22%,#fff calc(22% + 2px), red calc(22% + 3px)) 50% 100%/var(--d,110%) 100% no-repeat


body
background:pink;


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

Use pseudo element and in :after create circle shape

pseudo

:after

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;


<div class="banner">
</div>