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?

I'm trying to get the shadow to go around the div, right now, it looks like it's going around the before element — Blü, Mar 25 '15 at 22:24

score 3 · Accepted Answer · edited May 23 '17 at 12:12

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>

score 2 · Answer 2 · answered Mar 26 '15 at 09:19

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>

CSS create a box-shadow in diagonal

2 Answers2