Can I make different shape from css?

Question

Can I make this shape from css?

.shape {
  margin: 40px;
  height: 40px;
  width: 100px;
  border-radius: 50px;
  background: #333;
  position: relative;
}


.shape:before {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

<div class="shape"></div>

Answer 1

This is what you are looking for

.shape {
  margin: 40px;
  height: 40px;
  width: 110px;
  border-radius: 50px;
  background: #333;
  position: relative;
}

.shape:before {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

.shape:after {
  height: 40px;
  width: 121px;
  border-radius: 90%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
}

<div class="shape"></div>