Question

我在CSS中使用:after和:before创建了一个形状。我用:before创建了一个三角形，我想为整个形状赋予阴影效果。但是使用透明度创建三角形。通常情况下，它是一个矩形，但透明度变为三角形，因此当我尝试添加阴影时，阴影会被添加到矩形中。

如果我的解释很复杂，这里有一个小提琴：

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

在这个小提琴中，div a是我创造的形状。 Div b是我希望向您展示我为添加阴影所做的尝试的形状。我准备了div c并更改了伪部分的颜色，让你轻松看到伪元素。

正如你从小提琴那里看到的那样，三角形部分的阴影并不像我想的那样工作。我知道这是正常的，但我只是想知道是否有解决方案。

我尝试使用第二个：after或：之前添加一个新的伪元素来创建阴影，但我不能这样做。此外，是否可以使用第二个: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>

使用伪元素创建的形状（三角形）的阴影

1 个答案: