How to create a union of two shapes in css and apply dropshadow to the final shape?

Question

I am mainly a designer, but I am making a mock html document using some basic html and css to demonstrate the realizability of my design. Below is the custom shape i have designed on figma.

My design on Figma

Now, I am barely familiar with html or css, but by doing some rudimentary googling i was able to create the shape i wanted in css. Below are the code snippets of the html and css i have used to realize the result seen in the image below the code.

/* 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;
}

The result I got from the code above (without the dropshadow property)

Now, when I tried adding the shadow property, it looked as shown below, (which is not the expected result i was expecting)

Result I obtained with shadows applied separately

In order to tackle this I tried the following

I removed the shadow property from the individual elements.
Added the property to the parent of both the elements as shown below

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

When i did so, the shadow property wasn't applied to any element and looked like the one before shadow was added.

I presume, my lack of knowledge on the subject matter is the reason behind my incapability to find a solution for this using google. Please, guide me in the matter.

Umm.. is it Okay to answer my own question? Idk! Anyhow, I felt like a complete moron not to have attempted this as a person who regularly works on layers. I achieved the result by changing the shape properties of the circle as shown below. #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; } however, i am still keeping the question as my solution was sort of a jugaad and i would like to know better. — Srivathsa B N, Jan 13 '20 at 06:56
I dont understand what is the problem. cant you just put two images say this is what I want and this is what I have. I read this text 3 times could not figure out what is the problem — Andam, Jan 13 '20 at 06:57
@SrivathsaBN Yes, if you solved your issue, please post an answer. Stack Overflow tries to build a collection of common questions and answers and by posting your solution as an answer post, you contribute to that :) It's also easier to format and highlight things there. Note that you can only accept your own answer after a few days after your question was posted (I think two). Welcome to SO! — geisterfurz007, Jan 13 '20 at 06:59

score 3 · Answer 1 · edited Jan 13 '20 at 07:12

So, I found a solution to my problem by just changing my circle in to a semi circle and placing it exactly at the edge of my rectangle. Semi circle was created by varying the border radius property as shown below,

#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;
}

Here, is the result I obtained:

But still what I did was some kind of designer jugaad, but I would like to know if there is a technical possibility to get the same result.

How to create a union of two shapes in css and apply dropshadow to the final shape?

1 Answers1