CSS将边框应用于云形状？

我通过CSS3使用不同的

div

标记绘制了一个云。我正在尝试为整个形状添加边框，但我遇到了问题，因为每个形状都有自己的边框。如何将边框应用于整个云

HTML:

<div id="cloud">
  <div id="bottom_c"></div>
  <div id="right_c"></div>
  <div id="left_c"></div>
</div>

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body{
  background-color: #4ca3ff;
}
#cloud {
  position: absolute;

}
#bottom_c {
  position: relative; top: 200px; left: 500px;
  width: 350px;
  height: 150px;
  background-color: #fff;
  border-radius: 100px;
  border: solid 5px black;
  z-index: 100;
}
#right_c{
  position: absolute; top: 140px; left: 640px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-color: #fff;
  border: solid 5px black;
}
#left_c{
  position: absolute; top: 170px; left: 550px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #fff;
  border: solid 5px black;
}

图像：

<div id="cloud">
  <div id="bottom_c"></div>
  <div id="right_c"></div>
  <div id="left_c"></div>
</div>

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body{
  background-color: #4ca3ff;
}
#cloud {
  position: absolute;

}
#bottom_c {
  position: relative; top: 200px; left: 500px;
  width: 350px;
  height: 150px;
  background-color: #fff;
  border-radius: 100px;
  border: solid 5px black;
  z-index: 100;
}
#right_c{
  position: absolute; top: 140px; left: 640px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-color: #fff;
  border: solid 5px black;
}
#left_c{
  position: absolute; top: 170px; left: 550px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #fff;
  border: solid 5px black;
}

---

您无需任何附加元素即可完成此操作。只需使用与顶部云泡大小和形状相同的

：：before

和

：：after

伪元素<代码>z索引将所有内容保留在正确的层中

演示：

输出：

CSS:

正文{
背景色：#4ca3ff；
}
#云彩{
高度：230像素；
利润率：40像素；
位置：相对位置；
宽度：400px；
}
#云分区{
边框：实心5px黑色；
}
#底部c{
背景色：#fff；
边界半径：100px；
高度：150像素；
位置：绝对位置；
顶部：100px；
宽度：350px；
z指数：0；
}
#对{
背景色：#fff；
边界半径：100%；
高度：150像素；
左：140像素；
位置：绝对位置；
顶部：40px；
宽度：150px；
z指数：-1；
}
#左{
背景色：#fff；
边界半径：100%；
高度：100px；
左：50px；
位置：绝对位置；
顶部：70像素；
宽度：100px；
z指数：-1；
}
#云：以前{
背景色：白色；
边界半径：50%；
内容：''；
高度：100px；
左：55px；
位置：绝对位置；
顶部：75px；
宽度：100px；
z指数：1；
}
#云：：之后{
位置：绝对；顶部：45像素；左侧：145像素；
背景色：白色；
边界半径：50%；
内容：''；
宽度：150px；
高度：150像素；
z指数：1；
}

HTML:

---

感谢您提供原始解决方案！我需要创建多个云，并动态调整它们的大小和重新着色，因此我对原始解决方案进行了如下调整：

我使用高度、宽度、顶部和左侧属性的百分比值来调整云的大小。.cloud类使用padding top相对于云的宽度调整云的高度

我对：before和：after伪元素进行了div

我将id选择器更改为类选择器

我重新组织了属性，使它们更容易阅读

我希望这对某人有帮助。代码如下：

输出 我还没有发布图片的名声：/。这里有一个到输出的链接：

CSS: HTML:

---

谢天谢地，代码看起来既漂亮又干净，我注意到我使用了太多的元素和技巧，这在codepen或JSFIDLE上不起作用。我将js框架设置为jQuery。怎么办？

function updateCloudColor(cloudElement, color) {
    cloudElement.children().css("background-color", color);
}

$(window).load(function () {
    updateCloudColor($(".firstCloud"), "red");
    updateCloudColor($(".secondCloud"), "blue");
});