问题
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.
Without box-shadow on the triangle:
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.
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>回答1:
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>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>回答2:
A filter will work:
.shadowed {
-webkit-filter: drop-shadow(0px 2px 2px rgba(130,130,130,1));
filter : drop-shadow(0px 2px 2px rgba(130,130,130,1));
-ms-filter : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
filter : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
Working Example : http://codepen.io/tolmark12/pen/JopNeR?editors=110
Learn more at : Creating a true cross browser drop shadow
回答3:
IMHO, I think it's a bit hackish, but is using pure css to do this:
div{
height:200px;
width:100%;
border-radius:10px;
background:gray;
position:relative;
box-shadow:0 0px 10px black;
border:1px solid black;
}
div:before{
position:absolute;
bottom:-10px;
left:40px;
content:"";
background:gray;
height:20px;
width:20px;
transform: rotate(45deg);
border-bottom:1px solid black;
border-right:1px solid black;
box-shadow:0 0px 10px black;
}
div:after{
position:absolute;
bottom:0px;
left:30px;
content:"";
background:gray;
height:20px;
width:40px;
}<div>test</div>回答4:
You can't do what you want to do here using box-shadow. This is because the "arrow" effect is created by using a transparent color everywhere except the top. This means that the element is still a square and your shadow will render around it accordingly.
If you want to add a shadow to the shape of the image, try using an SVG, or just an image with a pre-rendered shadow.
<polygon points="220, 150 350, 220" style="fill:#FFFFFF; stroke:#000000;stroke-width:1"/>
来源：https://stackoverflow.com/questions/28033616/adding-box-shadow-to-a-after-pseudo-element