How to create a cloud by combining shapes into one using CSS?

问题

So I'm trying to create a cloud using divs and CSS mainly. I have few divs shaped as circles or blobs and the idea is to merge them into one so that they look like a cloud.

.cloud-body{
 
  width:250px;
  height:200px;
  background: linear-gradient(blue,blueviolet);
  margin-left: 30%;
  margin-top:20%;
  border-radius:50%;
  
}
.blob1{
  width: 100px;
  height: 100px;
  background: blue;
  border-radius:50%;
  position:relative;
  bottom: 200px;
  left: 60%;
 
}
.blob2{
  width: 200px;
  height: 150px;
  background: linear-gradient(blueviolet, blue);
  border-radius:50%;
  position:relative;
  bottom: 200px;
  left: 150px;
}
.blob3{
  width: 200px;
  height: 150px;
  background: linear-gradient(blueviolet, blue);
  border-radius:50%;
  position:relative;
  bottom: 400px;
  left: 400px
}

<div class="wrapper">
<div class="cloud-body"></div>
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>

However they just look like different blobs stacked on top of each other (as expected with divs). What is the way to combine them or more specifically make the boundaries between each shapes disappear? here's the link to the pen for this on codepen that I'm working on.

回答1:

You can consider multiple background to create your cloud with one element. You can easily add any number of circle/ellipse with any size and position. One value of radius will give a circle and 2 values will give an ellipse

.cloud {
  width:200px;
  height:150px;
  border-radius: 0 0 50px 50px;
  background:
  /*                radius                            position  / 2xradius*/
  radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30%  /70px    60px,
  radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50%  /100px   90px,
  radial-gradient(50px     ,blue 98%,transparent 100%) 100% 100%/100px   100px,
  radial-gradient(40px     ,blue 98%,transparent 100%) 0 100%   /80px    80px,
  /* base of the cloud */
  linear-gradient(blue,blue) bottom/100% 40px;;
  background-repeat:no-repeat;
}

<div class="cloud"></div>

If you want a gradient as coloration you can do it with mask. You simply use the gradient previously defined inside the mask property:

.cloud {
  width:200px;
  height:150px;
  border-radius: 0 0 50px 50px;
  background:linear-gradient(60deg,red,blue);
  -webkit-mask:
  radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30%  /70px   60px,
  radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50%  /100px  90px,
  radial-gradient(50px     ,blue 98%,transparent 100%) 100% 100%/100px  100px,
  radial-gradient(40px     ,blue 98%,transparent 100%) 0 100%   /80px   80px,
  
  linear-gradient(blue,blue) bottom/100% 40px;
  mask:
  radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30%  /70px   60px,
  radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50%  /100px  90px,
  radial-gradient(50px     ,blue 98%,transparent 100%) 100% 100%/100px  100px,
  radial-gradient(40px     ,blue 98%,transparent 100%) 0 100%   /80px   80px,
  
  linear-gradient(blue,blue) bottom/100% 40px;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

<div class="cloud"></div>

回答2:

im suggest use this css cloud:

.cloud, .cloudshadow {
	width: 350px; height: 120px;
	background: #3498db;
	border-radius: 100px;
	position: relative;
	margin: 150px 50px;
}
.cloud:after, .cloud:before, .cloudshadow:after, .cloudshadow:before {
	content: '';
	position: absolute;
	background: #3498db;
	z-index: 1
}

.cloud:after, .cloudshadow:after {
	width: 100px; height: 100px;
	top: -50px; left: 50px;
	border-radius: 100px;
}
.cloud:before, .cloudshadow:before  {
	width: 180px; height: 180px;
	top: -90px; right: 50px;
	border-radius: 200px;
}

<div class="cloud">
    <div class="cloudshadow"></div>
</div>

responsive cloud:

svg {
  height: 50%;
  width: 50%;
}
path {
  fill: #3498DB;
  stroke: #3498DB;
  stroke-width: 2;
  stroke-linejoin: round;
}
path:hover {
  fill: aliceblue;
  stroke: lightskyblue;
}

<svg viewBox='0 0 105 105'>
  <path d='M 25,60 
           a 20,20 1 0,0 0,40 
           h 50 
           a 20,20 1 0,0 0,-40 
           a 10,10 1 0,0 -15,-10 
           a 15,15 1 0,0 -35,10  
           z' />
</svg>

回答3:

This will do:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <link rel="stylesheet" href="style.css">
  <title>

  </title>
  <style>
    .cloud-body {

      width: 250px;
      height: 200px;
      background: linear-gradient(blue, blueviolet);

      border-radius: 50%;

    }

    .blob1 {
      width: 130px;
      height: 100px;
      background: blue;
      border-radius: 50%;



    }

    .blob2 {
      width: 200px;
      height: 150px;
      background: linear-gradient(blueviolet, blue);
      border-radius: 50%;


    }

    .blob3 {
      width: 200px;
      height: 150px;
      background: linear-gradient(blueviolet, blue);
      border-radius: 50%;



    }

    div.cloud-body,
    div.blob1,
    div.blob2,
    div.blob3 {
      float: left;
    }

    .my-4 {
      margin-top: 2.4rem !important
    }
  </style>
</head>

<body>
  <div style="display: inline;">
    <div class="cloud-body "></div>
    <div class="blob1 my-4 "></div>
    <div class="blob2"></div>
    <div class="blob3"></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

check:https://jsfiddle.net/sugandhnikhil/L4frjt3h/

来源：https://stackoverflow.com/questions/59336331/how-to-create-a-cloud-by-combining-shapes-into-one-using-css

标签

html

css

css-shapes