How to recreate an image using HTML and CSS?

Question

How to recreate image layout using HTML and CSS?

How to reach this curve at the end of rctangular div?

How to insert a small transparent area between a rectangular div and a circular div, where the transparent gap should inherit any color / image from the outer wrapper of the div, and not from the div of the rectangle along which the circular div is located

I tried to place a transparent circle outside the circular div, but this does not inherit the color from the outer shell, but it inherits the color of the rectangular div if its background color is set to transparent.

EDIT . To reduce clutter, use this as a link. This is what I am trying to achieve.

.wrapper{
  position: relative;
}
.rectangle{
  width: 70%;
  height: 50px;
  background: black;
  margin-bottom: 20px;
}
.circle{
  position: absolute;
  width: 50%;
  height: 300px;
  border-radius: 50%;
  border: 2px solid;
  top: -5px;
  right: 0;
  z-index: 999;
  background: white;
}

<div class="wrapper">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="circle"></div>
</div>

Run code

Answer 1

radial gradient, .

:

.container {
  position: relative;
}

.circle {
  position: absolute;
  right: 0;
  top: 10%;
  float: right;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #000000;
}

.rectangle {
  position: absolute;
  left: 0;
  right: 100px;
  top: 20px;
  height: 40px;
  background: radial-gradient(circle at 100% calc(100% + 35px), rgba(0,0,0,0) 110px, #000000 0);
}

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

Answer 2

div div, / div, div , div

.wrapper currentColor
- , . SVG, CSS.

MDN on currentColor
( IE :()

: z-index: 1 . 999 1000000§§§, , 998: o

.wrapper{
  position: relative;
  color: white; /* reference */
}
.rectangle{
  width: 70%;
  height: 50px;
  background: black;
  margin-bottom: 20px;
}
.circle{
  position: absolute;
  width: 50%;
  height: 300px;
  border-radius: 50%;
  border: 10px solid currentColor; /* used here */
  top: -5px;
  right: 0;
  z-index: 1;
  background: black;
}

<div class="wrapper">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="circle"></div>
</div>