CSS create a box-shadow in diagonal

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>