html


<body>
<div id="space">
<div id="space-shuttle"> 
  <div id="body">
    <div id="pattern"></div>
  </div>
  <div id="fire"></div>
  <div id="smoke"></div>
</div>
</div>
</body>

CSS


html,body{
  margin: 0;
  height: 100%;
}

#space{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #001E43;
}

/* シャトル本体 */
#body{
  position: relative;
  z-index: 2;
  border: 1px solid #000;
  border-radius: 100% 100% 15% 15%;
  width: 125px;
  height: 500px;
  background: #0055FC;
}

/* 翼 */
#body:before{
  content: "";
  position: absolute;
  bottom: 65  px;
  left: -190px;
  border: 250px solid transparent;
  border-radius: 10%;
  border-bottom: 150px solid #0055FC;
}

/* シャトルの模様 */
#pattern{
  position: absolute;
  bottom: 100px;
  border: 3px solid #fff;
  width: 119px;
  box-shadow: 0 20px 0 0 #FEEEED;
}

#fire{
  position: relative;
  z-index: 1;
  left: 35px;
  top: 10px;
  border: 30px solid transparent;
  border-top: 150px solid #FEBE65;
  border-radius: 25% 25% 50% 50%;
  width: 0;
  height: 0;
  background: #FF4500;

  box-shadow:
    0 0 30px 3px #8C1E1F,
    0 0 80px 3px #eee;
}

#smoke{
  position: absolute;
  bottom: 75px;
  left: 613px;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  background: #eee;
  box-shadow:
    -15px 30px 0 0 #eee,
     15px 30px 0 0 #eee,
    -30px 60px 0 0 #eee,
      0px 60px 0 0 #eee,
     30px 60px 0 0 #eee,
    -45px 90px 0 0 #eee,
      0px 90px 0 0 #eee,
     45px 90px 0 0 #eee;
}

smokeは灰色の円をピラミッド型に配置して作っています。

CSSでスペースシャトルを作ってみた。

html

CSS