I'm trying to develop a small profile including a shadow for a clipped div. This is what the profile should look like:

I'm now focusing on the two sloped lines (one on the left side and the other on the right side). I used a clipped div containing another clipped div to make this border-like effect, and now I hope to add shadow to it.

However, the filter: drop-shadow() doesn't work here, and it's greyed out and striked through on Chrome's inspect tool. Can someone tell me why and how to get rid of this problem? (and if possible could anyone tell me how to scale the image here?) Here is my code: HTML:

<div class="decorative-container">
    <div class="decorative-1-wrapper-shadow">
        <div class="decorative-1-wrapper">
            <div class="decorative-1">
            </div>
        </div>
    </div>
    ...
</div>

CSS(SCSS):

.decorative-container {
  position: absolute;
  height: 100%;
  width: 100%;
  .decorative-1-wrapper-shadow {
    position: absolute;
    height: 100%;
    width: 250%;
    left: -58.5%;
    filter: drop-shadow(
      0px 10px -4px rgba(colors.$grey, 0.3),
      -12px 0px -4px rgba(colors.$grey, 0.3)
    );
  }
  .decorative-1-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    clip-path: polygon(34.3% 0%, 79% 0%, 46.5% 100%, 0% 100%);
    background-color: colors.$navy_blue;
    .decorative-1 {
      position: absolute;
      left: 0.35%;
      width: 99.5%;
      height: 100%;
      background-color: colors.$white;
      clip-path: polygon(34.3% 0%, 79% 0%, 46.2% 100%, 0% 100%);
    }
  }
}

This is what inspect tool displays: