CSS boîte ombre autour de triangle

J'ai besoin de créer un triangle avec une ombre portée à l'aide de simple en html et css. Répondu par une autre stackoverflow question, j'ai été en mesure de créer le triangle avec l'onglet bordures. En gros je créer 1 côté d'une boîte avec une très large bordure et la proximité de la côte avec une large bordure transparente:

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
}

fonctionne très bien, mais quand j'essaie d'appliquer une zone d'ombre de l'ombre tourne autour de la enfermant place... pas le triangle:

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
    -webkit-box-shadow: 0 0 10px black;
}

Comment puis-je obtenir un triangle en utilisant uniquement css/html avec une ombre portée?

source d'informationauteur at.

  1. 6

    Semble impossible. Certainement l'aide d'un imagine est beaucoup plus facile solution.
    J'ai fait quelque chose comme triangle 🙂 http://jsfiddle.net/5dw8M/109/ . Désolé, impossible de laisser un commentaire sous votre post. Peut-être il va servir comme une source d'inspiration pour quelqu'un;

  2. 4

    Qu'en mettre un autre div avec la propriété et jouer avec les positions?
    quelque chose comme http://jsfiddle.net/eveevans/JWGTw/

  3. 4

    Vous pouvez utiliser la "transformation" de la propriété de faire tourner un carré de 45 degrés et masquer la moitié, mais pas tous les navigateurs prennent en charge, de sorte que vous aurez besoin d'un secours.

    .triangle-with-shadow {
   width: 100px;
   height: 50px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg);
   -ms-transform:rotate(45deg); /* IE 9 */
   -moz-transform:rotate(45deg); /* Firefox */
   -webkit-transform:rotate(45deg); /* Safari and Chrome */
   -o-transform:rotate(45deg); /* Opera */
   top: 25px;
   left: 25px;
   box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}​

    Démo sur jsfiddle.

    Levée de cette CSS Astuces page avec des modifications.

  4. 1

    Serait <canvas> avec un PNG de repli être une option?

    Démo: jsfiddle.net/Marcel/3dbzm/1

  5. 1

    Créer un double de ce triangle, décolorer, de lui donner un z-index négative de la valeur à l'aide de css, et enfin sur centre avec positionnement CSS.

    div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}
  6. 0

    Probablement la meilleure option est d'utiliser filter:

    filter: drop-shadow(0 0 10px black);