J'ai un div appelé .testimonial-inner
et en utilisant le pseudo-élément :after
, j'ai une flèche qui se trouve en dessous, pointant vers le bas. Le problème que je rencontre, c'est d'ajouter une zone d'ombre à tout cela pour qu'ils ressemblent tous les deux à un élément naturel.
Sans box-shadow
sur le 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>
Notez que l'ombre de la boîte ne s'enroule pas actuellement autour de la flèche.
Lorsque je l'ajoute à la déclaration :after
, j'obtiens le résultat suivant:
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>
Vous pouvez ajouter un autre: pseudo-élément, le faire pivoter de 45deg
et y ajouter 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>
Une autre approche utilisant svg
comme un 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>
Un filtre fonctionnera:
.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')";
}
Exemple de travail: http://codepen.io/tolmark12/pen/JopNeR?editors=110
En savoir plus sur: Créer une véritable ombre portée de tous les navigateurs
IMHO, je pense que c'est un peu hackish, mais utilise css pure pour faire cela:
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>
Vous ne pouvez pas faire ce que vous voulez faire ici en utilisant box-shadow. En effet, l'effet "flèche" est créé en utilisant une couleur transparente partout sauf le haut. Cela signifie que l'élément est toujours un carré et que votre ombre restituera en conséquence.
Si vous souhaitez ajouter une ombre à la forme de l'image, essayez d'utiliser un fichier SVG ou simplement une image avec une ombre préalablement rendue.
<polygon points="220, 150 350, 220" style="fill:#FFFFFF; stroke:#000000;stroke-width:1"/>