css 梯形光线

要实现CSS梯形光线效果，可以使用CSS3的伪元素和box-shadow属性。

首先，需要创建一个正方形容器，然后使用transform属性将其旋转45度。接着，使用伪元素:before和:after来创建两个三角形，分别放置在容器的上方和下方，并且使用box-shadow属性为其添加光线效果。

以下是一个示例代码：

<div class="trapezoid"></div>

.trapezoid {
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  position: relative;
}

.trapezoid:before,
.trapezoid:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 70px 70px 0;
}

.trapezoid:before {
  border-color: transparent #fff transparent transparent;
  left: 0;
  top: -70px;
  box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.3);
}

.trapezoid:after {
  border-color: transparent transparent #fff transparent;
  right: 0;
  bottom: -70px;
  box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.3);
}

在上面的示例代码中，容器的宽度和高度都设置为100px，并且使用transform: rotate(45deg)将其旋转45度。然后，使用伪元素:before和:after创建两个三角形，分别放置在容器的上方和下方，使用border-style属性将其设置为三角形，并且使用border-width和border-color属性设置其大小和颜色。最后，使用box-shadow属性为其添加光线效果。

你可以根据实际情况修改上面的代码，实现不同的梯形光线效果。