CSS 雲のような図形をつくる。

実際に動作確認したい人向け
https://jsfiddle.net/junya_5102/q9243zg5/2/

<div class="cloud-wrap lightseagreen">
  <div class="cloud"></div>
  <p class="text">Hello</p>
</div>

<div class="cloud-wrap olivedrab">
  <div class="cloud"></div>
  <p class="text">World!</p>
</div>

.cloud-wrap{
  position: relative;

  display: inline-block;
  width: 100px;
  height: 100px;

  margin-top: 10px;
  margin-left: 10px;
}

.cloud-wrap:before,
.cloud-wrap:after{
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";

  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: currentColor;
}

.cloud-wrap:before{
  transform: translate(-50%,-50%) rotate(65deg);
}

.cloud-wrap:after{
  transform: translate(-50%,-50%) rotate(-65deg);
}

.cloud-wrap .cloud{
  position: absolute;

  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: currentColor;

  transform: rotate(0);
}

.cloud-wrap .cloud:before,
.cloud-wrap .cloud:after{
  position: absolute;
  content: "";

  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: inherit;
}

.cloud-wrap .cloud:before{
  transform: rotate(15deg);
}

.cloud-wrap .cloud:after{
  transform: rotate(45deg);
}

/* テキスト */
.cloud-wrap .text{
  position: absolute;
  top: 50%;
  left: 50%;

  margin: 0;
  font-size: 1.4em;
  color: white;
  /* 単一行 */
  white-space: nowrap;

  transform: translate(-50%,-50%);
  z-index: 2;
}

/* 雲の色 */
.lightseagreen{
  color: lightseagreen;
}

.olivedrab{
  color: olivedrab; 
} 

/* アニメーション */
.cloud-wrap:hover,
.cloud-wrap:active{
  animation: cloud_anim 1s ease-in-out infinite alternate;  
}

@keyframes cloud_anim{
  0%{
    transform: translateX(-5%);
  }

  100%{
    transform: translateX(5%);
  }
}

雲の作り方

5つの正方形を重ねて配置する
配置した正方形を回転させる

正方形の角がでるように回転させます
こんな形を作れたら角を丸めて完成!