Why is my drop-shadow not working on parent element?-CodePudding

I'm making an origami butterfly, placing trapezoid shapes on top of others, to create an illusion of folded paper. However, for some reason, the filter:drop-shadow is not working on the clip-path part-1 and part-2, even though I have wrapped around them the wrapper parents and applied drop shadow there.

I have trouble figuring this out. Appreciate any help. Thank you!

* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.frame {
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 1px 13px 2px #5d5d5d30;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: translateY(3vw);
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}

.part-1-wrap {
  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 6;
}

.part-1 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 6vw;
  transform: rotate(15deg);
}

.part-2-wrap {
  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 3;
}

.part-2 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 22vw;
  transform: scaleX(-1) rotate(15deg);
}

<div >
  <div >
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
</div>

CodePudding user response：

rgba takes 4 parameters (RED, GREEN, BLUE, ALPHA)

You used it like this:

  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));

Also using two drop-shadow will take the total sum of them, you won't have two shadows.

for example :

filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.5)) drop-shadow(-9px -5px -10px rgba(0,0,0,0.5));

This will make no shadow at all.

You should use one drop shadow per element like this:

filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.5));

Check the snippet:

Note that I changed 0.2 to 0.8 to see the effect.

* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.frame {
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 1px 13px 2px #5d5d5d30;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: translateY(3vw);
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}

.part-1-wrap {
  filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.8));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 6;
}

.part-1 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 6vw;
  transform: rotate(15deg);
}

.part-2-wrap {
  filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.8));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 3;
}

.part-2 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 22vw;
  transform: scaleX(-1) rotate(15deg);
}

<div >
  <div >
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
    <div >
      <div ></div>
    </div>
  </div>
</div>

CodePudding user response：

Use:

rgba(0, 0, 0, 0.2)

instead of

rgba(black, 0.2)