web-dev-qa-db-fra.com

Ajout de box-shadow à un pseudo-élément après:

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:

enter image description here

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: 

enter image description here

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>

htmlcsscss3pseudo-elementcss-shapes
15
egr103

Vous pouvez ajouter un autre: pseudo-élément, le faire pivoter de 45deg et y ajouter box-shadow.

Mise à jour 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>

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>

16
Weafs.py

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')";
}

enter image description here

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

23
tolmark

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>

2
jbutler483

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"/>
0
teh1