CSS 在对 Angular 线上创建一个盒子阴影

Question

抱歉，这个奇怪的标题，我想不出更好的方式来描述这个问题

我在 div 中添加了一个 before 元素来剪切它的侧面，并且我想在该 div 上添加阴影，但由于 before 元素，它看起来很奇怪:

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>

这是一个显示问题的 JSFiddle: http://jsfiddle.net/73t6uak0/

有什么办法可以解决这个问题，使盒子阴影围绕 div 或在前面的元素中添加插入阴影？

Answer 1

您可以尝试透视变换来制作梯形，而不需要伪元素。改编自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>