CSS triangle with inset shadow - html

Question

I've made a "triangle" using CSS using the code outlined HERE
(jsFiddle example)
It works great, but I would like to have an inset shadow on the triangle and bar like this:
How?
HTML:
<div id="wrapper">
<div class="triLeft"></div>
<div class="triAngle"></div>
</div>
CSS:
.triLeft{
width:40px;
background:#fff;
margin:0;
float:left;
height:200px;
}
.triAngle{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 40px;
border-color: transparent transparent transparent #ffffff;
float:left;
margin-top:20px;
}
#wrapper{
height:200px;
background:brown;
}

Answer 1

you could try it another way, without borders but transform:rotate();
http://codepen.io/anon/pen/MymQMK
div.trgl {
position:relative;
margin:2em;
overflow:hidden;
}
div.trgl:after {
content:'';
position:absolute;
height:40px;
width:40px;
top:2em;
left:-20px;
background:white;
box-shadow: inset 0 0 5px black ;
transform:rotate(45deg);
}
div.trgl div{
position:relative;
min-height:200px;
padding:1em;
box-shadow: 0 0 5px black;
margin:3px;
background:lightgray;
}
<div class="trgl">
<div>
</div>
</div>