如何在css中创建两个形状的联合并将阴影应用于最终形状？答案

【问题标题】：How to create a union of two shapes in css and apply dropshadow to the final shape?如何在css中创建两个形状的联合并将阴影应用于最终形状？
【发布时间】：2020-04-29 20:49:49
【问题描述】：

我主要是一名设计师，但我正在使用一些基本的 html 和 css 制作一个模拟 html 文档来展示我的设计的可实现性。下面是我在 figma 上设计的自定义形状。

现在，我对 html 或 css 几乎不熟悉，但通过一些基本的谷歌搜索，我能够在 css 中创建我想要的形状。下面是我用来实现在代码下方图片中看到的结果的html和css的代码sn-ps。

/* Html Part */
<body>
    <div id="topLabel">
        <div id="topLabelRectangle"></div>
        <div id="topLabelCircle"></div>
    </div>
</body>

/*CSS Part*/
#topLabelRectangle {
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 90%;

background: #FFFFFF;
border-radius: 0px 0px 50px 50px;
//box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
}

#topLabelCircle {
position: absolute;
left: 47%;
right: 47%;
top: 4.5%;
bottom: 83%;
background: #FFFFFF;

//box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
border-radius: 250px;
}

我从上面的代码得到的结果（没有 dropshadow 属性）

现在，当我尝试添加 shadow 属性时，它看起来如下所示（这不是我所期望的结果）

单独应用阴影得到的结果

为了解决这个问题，我尝试了以下方法

我从各个元素中删除了 shadow 属性。
将属性添加到两个元素的父级，如下所示

   #topLabel {
       box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
   }

当我这样做时，阴影属性没有应用于任何元素，看起来就像添加阴影之前的那个。

我想，我对这个主题缺乏了解是我无法使用谷歌找到解决方案的原因。请在这件事上指导我。

【问题讨论】：

嗯.. 可以回答我自己的问题吗？不知道！无论如何，作为一个经常在图层上工作的人，我没有尝试过这个，我觉得自己像个彻头彻尾的白痴。我通过改变圆的形状属性来实现结果，如下所示。 #topLabelCircle { 位置：绝对；左：46.2%；对：46.2%；最高：7.5%；底部：84%；背景：#FFFFFF；盒子阴影：0px 10px 10px rgba(112, 112, 112, 0.25);边框半径：0px 0px 300px 300px；但是，我仍然保留这个问题，因为我的解决方案有点像 jugaad，我想知道得更好。
我不明白是什么问题。你不能只放两张图片说这就是我想要的，这就是我所拥有的。这篇文章我读了 3 次，无法弄清楚是什么问题
@SrivathsaBN 是的，如果您解决了您的问题，请发布答案。 Stack Overflow 尝试构建常见问题和答案的集合，并通过将您的解决方案发布为答案帖子，您对此做出了贡献:) 在那里格式化和突出显示内容也更容易。请注意，您只能在问题发布几天后接受自己的答案（我认为是两个）。欢迎来到 SO！
@geisterfurz007 嗨，谢谢。我已经发布了答案。

标签： html css graphic-design

【解决方案1】：

所以，我找到了解决问题的方法，只需将我的圆改为半圆并将其准确放置在矩形的边缘。半圆是通过改变边框半径属性创建的，如下所示，

#topLabelRectangle {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 92.5%;

  background: #FFFFFF;
  border-radius: 0px 0px 25px 25px;
  box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
}

#topLabelCircle {
  position: absolute;
  left: 46.2%;
  right: 46.2%;
  top: 7.5%;
  bottom: 84%;
  background: #FFFFFF;

  box-shadow: 0px 10px 10px rgba(112, 112, 112, 0.25);
  border-radius: 0px 0px 300px 300px;
}

这是我得到的结果：

但我所做的仍然是某种设计师 jugaad，但我想知道是否有技术上的可能性来获得相同的结果。

【讨论】：