如何通过使用CSS将形状组合成一个云来创建云? [英] How to create a cloud by combining shapes into one using CSS?

问题描述

因此，我主要尝试使用div和CSS创建云.我很少有div形状为圆形或斑点的想法，其想法是将它们合并为一个，使它们看起来像云一样.

  .cloud-body {宽度:250像素；高度:200px；背景:线性渐变(蓝色，蓝紫色)；左边距:30％；保证金最高:20％;边界半径:50％；}.blob1 {宽度:100px；高度:100px；背景:蓝色；边界半径:50％；位置:相对；底部:200px；左:60％；}.blob2 {宽度:200像素；高度:150像素；背景:线性渐变(blueviolet，蓝色)；边界半径:50％；位置:相对；底部:200px；左:150px；}.blob3 {宽度:200像素；高度:150像素；背景:线性渐变(blueviolet，蓝色)；边界半径:50％；位置:相对；底部:400px；左:400px}  

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

但是，它们看起来就像是堆叠在一起的不同blob(如divs所期望的那样).结合它们的方法是什么?或更具体地说，是使每种形状之间的边界消失吗?这是我正在处理的代码笔上

如果您想要渐变作为着色，则可以使用 mask 进行.您只需使用先前在mask属性内定义的渐变即可:

  .cloud {宽度:200像素；高度:150像素；border-radius:0 0 50px 50px;背景:线性渐变(60度，红色，蓝色)；-webkit-mask:径向渐变(35像素30像素，蓝色98％，透明100％)20％30％/70像素60像素，径向渐变(50像素45像素，蓝色98％，透明100％)50％50％/100像素90像素，径向渐变(50像素，蓝色98％，透明100％)100％100％/100像素100像素，径向渐变(40像素，蓝色98％，透明100％)0 100％/80像素80像素，线性渐变(蓝色，蓝色)底部/100％40px；面具:径向渐变(35像素30像素，蓝色98％，透明100％)20％30％/70像素60像素，径向渐变(50像素45像素，蓝色98％，透明100％)50％50％/100像素90像素，径向渐变(50像素，蓝色98％，透明100％)100％100％/100像素100像素，径向渐变(40像素，蓝色98％，透明100％)0 100％/80像素80像素，线性渐变(蓝色，蓝色)底部/100％40px；-webkit-mask-repeat:no-repeat;mask-repeat:不重复；}  

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

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.

解决方案

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>

这篇关于如何通过使用CSS将形状组合成一个云来创建云?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！