将框阴影添加到:after伪元素 [英] Adding box-shadow to a :after pseudo element
问题描述
我有一个称为.testimonial-inner
的div,使用:after
伪元素时,我有一个箭头指向其下方,该箭头指向下方.我遇到的问题是在其中添加一个阴影,使它们看起来都像一个自然元素.
I have a div called .testimonial-inner
and using the :after
pseudo element I have an arrow that sits underneath it pointing down. The problem I'm having is adding a box-shadow to it all so they both look like one natural element.
三角形上没有box-shadow
:
body {
background: #eee
}
.testimonial-inner {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 30px;
display: block;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
top: 100%;
left: 48px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 18px;
margin-left: -18px;
}
<div class="c-4 testimonial-wrap">
<div class="testimonial-inner">
<p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
</div>
</div>
请注意,当前框阴影不会围绕箭头.
Notice the box shadow currently doesn't wrap around the arrow.
将其添加到:after
声明中时,得到以下结果:
When I add it to the :after
declaration I get the following result:
body {
background: #eee
}
.testimonial-inner {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 30px;
display: block;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
top: 100%;
left: 48px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 18px;
margin-left: -18px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
<div class="c-4 testimonial-wrap">
<div class="testimonial-inner">
<p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
</div>
</div>
推荐答案
您可以添加另一个:pseudo-element,将其旋转45deg
并添加box-shadow
.
You could add another :pseudo-element, rotate it by 45deg
and add box-shadow
to it.
Updated Fiddle
body {
background: #eee
}
.testimonial-inner {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 30px;
display: block;
margin-bottom: 25px;
position: relative;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
top: 100%;
left: 48px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 18px;
margin-left: -18px;
}
.testimonial-inner:before {
content: '';
position: absolute;
transform: rotate(45deg);
width: 36px;
height: 36px;
bottom: -12px;
z-index: -1;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
<div class="c-4 testimonial-wrap">
<div class="testimonial-inner">
<p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
</div>
</div>
使用svg
作为三角形的另一种方法.
Another approach using svg
as a triangle.
body {
background: #eee
}
.testimonial-wrap {
position: relative;
}
.testimonial-inner {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 30px;
display: block;
margin-bottom: 25px;
position: relative;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
#triangle {
position: absolute;
top: 100%;
margin-top: -1px;
left: 50px;
}
<div class="c-4 testimonial-wrap">
<div class="testimonial-inner">
<p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
</div>
<svg id="triangle" width="40" height="26">
<defs>
<filter id="f" width="150%" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.8" />
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path filter="url(#f)" d="M0,0 h40 l-20,20z" fill="white" />
</svg>
</div>
这篇关于将框阴影添加到:after伪元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!