CSS cloud shape

70

.cloud {
  height: 30vw;
  width: 90vw;
  background: lightgray;
  border-radius: 40vw;
  border: 5px solid black;
  position: relative;
  margin-top: 20vw;
}
.cloud:before {
  content: "";
  position: absolute;
  top: -10vw;
  box-sizing: border-box;
  height: 20vw;
  width: 20vw;
  left: 15vw;
  border-radius: 50%;
  border: 5px solid black;
  border-bottom-color: transparent;
  border-right-color: transparent;
  background: lightgray;
  transform: rotate(40deg);
}
.cloud:after {
  content: "";
  position: absolute;
  height: 40vw;
  width: 40vw;
  top: -20vw;
  left: 32vw;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid black;
  border-bottom-color: transparent;
  background: lightgray;
  border-right-color: transparent;
  transform: rotate(55deg);
}

Comments

Submit
0 Comments