css - 用伪元素创建的形状(三 Angular 形)的阴影

Question

我在 CSS 中使用 :after 和 :before 创建了一个形状。我用 :before 创建了一个三 Angular 形，我想为整个形状添加阴影效果。但是三 Angular 形是通过使用透明度创建的。通常情况下，它是一个矩形，但随着透明度的增加，它变成了一个三 Angular 形，所以当我尝试添加阴影时，阴影被添加到矩形中。

如果我的解释很复杂，这里有一个 fiddle :

http://jsfiddle.net/ctarimli/uQQhG/3/

在这个 fiddle 中，div a 是我创建的形状。 Div b 是我想向您展示我尝试添加阴影的形状。并且我准备了div c，并且改变了伪元素的颜色，让你更容易看到伪元素。

正如您从 fiddle 中看到的那样，三 Angular 形部分的阴影没有按我想要的那样工作。我知道这很正常，但我只是想知道是否有解决方案。

我尝试使用第二个 :after 或 :before 添加一个新的伪元素来创建阴影，但我做不到。另外，是否可以使用第二个 :before 和 :after ？

Answer 1

您可以使用伪元素和倾斜。

然后在内部和外部调度阴影以在需要的地方相互隐藏:

DEMO

---

CSS

#a {
  background: turquoise ;
  margin:1em;
}
#b {
  background: tomato ;
  margin:1em auto;
}
#c {
  background: orange ;
  margin:1em 18%;
}
div {box-shadow:0 0 5px; width:80%;}
div:after {/* after so it comes last */
  content:'';
  display:block;
  height:1.4em;/* tune its-height */
  position:relative;/* to move a bit to hide box-shadow of div parent */
  top:5px;
  left:-10px;
  background:white;
  width:30%;/* tune its size */
  box-shadow:
    inset  18px  0 0 white,
    inset 0px -3px white,
    inset 0 0 3px   black;
  transform:skew(45deg);
}

---

HTML 基础:

<div id="a">a <br/><!--demo behavior purpose--> A</div> 
<div id="b">b</div>   
<div id="c">c</div>