CSS 在对角线上创建 box-shadow

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/

有什么方法可以解决这个问题，使 box-shadow 绕过 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>

Answer 2

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

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 在对角线上创建 box-shadow

CSS create a box-shadow in diagonal

css

css-shapes