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

Question

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

我已经在我的div中添加了一个before元素来削减它的一面，我想在该div上添加一个阴影，但由于before元素，它看起来很奇怪：

HTML：

＆＃13;

＆＃13;

    #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;
    }

＆＃13;

<div id="equipe1"></div>

＆＃13;

＆＃13;

＆＃13;

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

有什么方法可以解决这个问题，让盒子阴影绕过div或者在前一个元素上添加一个插入阴影？

Answer 1

您可以尝试透视变换来制作梯形，而不需要伪元素。改编自this answer。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div id="equipe1"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您也可以尝试使用skewX转换：

＆＃13;

＆＃13;

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;
  }

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;