.testimonial-inner
というdivがあり、:after
疑似要素を使用して、その下にある矢印が下向きになっています。私が抱えている問題は、ボックスシャドウをすべて追加して、両方が1つの自然な要素のように見えるようにすることです。
三角形に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>
現在、ボックスの影が矢印の周りに回り込んでいないことに注意してください。
:after
宣言に追加すると、次の結果が得られます。
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
を追加できます。
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
を三角形として使用する別のアプローチ。
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>
フィルターが機能します:
.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')";
}
作業例: http://codepen.io/tolmark12/pen/JopNeR?editors=11
詳細については、 真のクロスブラウザードロップシャドウの作成
私見、私はそれが少しハックだと思うが、これを行うために純粋なCSSを使用しています:
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>
ここでは、box-shadowを使用してやりたいことを実行できません。これは、上部を除くすべての場所で透明色を使用して「矢印」効果が作成されるためです。これは、要素がまだ正方形であり、それに応じて影がその周りにレンダリングされることを意味します。
画像の形に影を追加したい場合は、SVGを使用するか、事前にレンダリングされた影付きの画像を使用してみてください。
<polygon points="220, 150 350, 220" style="fill:#FFFFFF; stroke:#000000;stroke-width:1"/>