I'm coding some fancy stuff for teaching myself.

I have an aslope left corner. Now, i want to add the box shadow and it showed like the following image:

[![enter image description here](https://i.stack.imgur.com/1MnL2.png)](https://i.stack.imgur.com/1MnL2.png)

This is my code snippet:

```
html, body {
    margin: 0px;
}

.navbar {
  position:relative;
  content:""; 
   border-left: 300em solid #454545;
   border-bottom: 120px solid transparent;
  z-index: 2;
  box-shadow: 0px 8px 23px 4px black;
}

.under-bar {
    margin-top: -40px;
    background: #851e39;
    height: 200px;
    opacity: 0.8
}

<html>
   <body>
        <div class="navbar">

        </div>
        <div class="under-bar">
        </div> 
    </body>
</html>

```

Can someone help me to set a box-shadow under the header?