在 DIV 上创建倾斜框阴影

Question

如何在 div 元素上添加倾斜框阴影？

我尝试在 div 后面添加一个绝对 div，但这似乎无法正常工作。

我尝试过的CSS是：

.shadow-box-bg {
background-color: rgba(0,0,0,0.8);
width: 150px;
height: 100px;
position: absolute;
z-index: 9;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: scale(2.3) rotate(88deg) translateX(67px) translateY(-17px) skewX(3deg) skewY(-2deg);

}

似乎使用 div 阴影我可以有更好的运气。但我不知道如何让它倾斜。

Answer 1

您可以使用伪元素而不是仅出于样式目的创建空 div

例如http://codepen.io/anon/pen/yNQjgB

---

    div {
       width: 200px;
       height: 300px;
       background: #b33049;
    }
    
    .skewedshadow {
      position: relative;
    }

    .skewedshadow:before {
      position: absolute;
      z-index: -1;
      content: "";
      width: inherit;
      height: inherit;
      background: rgba(0,0,0, .45);  
      transform: rotate(1.5deg) translateX(10px) translateY(15px) skewX(4deg) skewY(-4deg);
      filter: blur(5px);
    }

<div class="skewedshadow"></div>

---

截图