CSS3 Set Box Shadow to aslope corner

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:

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?

Solution

You can use transform: rotate(); instead of the border tricks.

body {
  margin: 0;
}
.navbar {
  height: 200px;
  background-color: #9d4b61;
  position: relative;
  overflow: hidden;
}
.navbar:before {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  width: 100%;
  height: 100px;
  box-shadow: 0px 8px 23px 4px #000;
  transform: rotate(-1deg);
  background-color: #333;
}
.menu {
  position: relative;
  left: 20px;
  top: 20px;
  color: #fff;
}

<div class="navbar">
  <div class="menu">menu</div>
</div>