CSS create a box-shadow in diagonal - css

Question

sorry for the weird title, I couldn't think of a better way to describe the issue
I've added a before element to my div to cut the side of it and I want to add a shadow over that div, but it looks weird because of the before element:
HTML:
#equipe1 {
background: #262626;
width: 564px;
height: 121px;
left: 0;
top: 57px;
position: absolute;
box-shadow: 0 0 4px 0 #0c0c0c;
}
#equipe1:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 130px solid #1a1a1a;
border-left: 130px solid rgba(0, 0, 0, 0);
width: 0;
}
<div id="equipe1"></div>
and here's a JSFiddle showing the issue:
http://jsfiddle.net/73t6uak0/
is there any way I could fix this to make the box-shadow go around the div or add an inset shadow to the before element?

Answer 1

You can try perspective transforms to make the trapezium, without the need for pseudo-elements. Adapted from this answer.
body {
background: #1a1a1a;
}
#equipe1 {
background: #333;
width: 564px;
height: 121px;
position: relative;
box-shadow: 0 0 5px 0 #AAA;
-webkit-transform: perspective(300px) rotateX(30deg);
-o-transform: perspective(300px) rotateX(30deg);
-moz-transform: perspective(300px) rotateX(30deg);
transform: perspective(300px) rotateX(30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
margin: 10px 10px;
}
<div id="equipe1"></div>

Answer 2

You could also try using the skewXtransform:
div{
display:inline-block;
height:50px;
width:200px;
position:relative;
overflow:hidden;
}
div:before{
content:"";
position:absolute;
height:100%;
width:100%;
top:0;
left:-12%;
background:rgba(0,0,0,0.2);
transform:skewX(45deg);
box-shadow:inset 0 0 3px red;
}
<div></div>