在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

e.g。 http://codepen.io/anon/pen/yNQjgB

<强>标记

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

<强> CSS

div {
   width: 200px;
   height: 400px;
   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);
}

<强>结果