title: Creating a responsive cloud shape
body: <p>I've been trying to create a responsive cloud shape in CSS for a project. I am trying not to do this with images, CSS or inline SVG due to HTTP requests and the requirement for responsiveness.</p>
  
  <p>The shape in question would be this: (but can be similar - slight variations/improvements would be cool):</p>
  
  <p><img src="https://i.stack.imgur.com/3ZGvh.png" alt="Cloud Shape"></p>
  
  <p>I have found both of these questions but they don't seem to suit my exact needs:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/28785330/how-to-fill-a-text-with-color-using-css/">How to fill a text with color using CSS?</a></li>
  <li><a href="https://stackoverflow.com/questions/16508834/css-apply-border-to-a-cloud-shape/">CSS apply border to a cloud shape?</a></li>
  </ul>
  
  <p>I have attempted (and failed) at creating a cloud with a <code>border</code> or <code>box-shadow</code> and need to know if this is possible with CSS or as an alternative, inline SVG. Ive also seen Canvas is an option too but I would prefer to stay away from that as it can be quite complicated.</p>
  
  <p>This is my <em>poor</em> attempt</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: skyblue;
  }
  
  .cloud {
    width: 15%;
    height: 10vh;
    background: white;
    position: relative;
    margin: 100px 100px;
    border-radius: 65px;
    box-shadow: black 0 0 10px 10px;
  }
  .cloud:after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    top: -60px;
    left: 100px;
    border-radius: 75px;
    background: white;
  }
  .cloud:before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    background: white;
    left: 50px;
    top: -30px;
    border-radius: 35px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cloud"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, I'm having trouble with the responsiveness and calculating exactly what heights/widths everything needs to be.</p>
  
  <p>I am also trying to keep the amount of HTML down to an absolute minimum, and so would really prefer to use a single div or short SVG code.</p>