cuadro de CSS sombra alrededor del triángulo

Question

necesito para crear un triángulo con una gota de sombra usando html simple y css. Respondido por otra pregunta de stackoverflow, pude crear el triángulo con bordes en inglete. Básicamente creo 1 lado de una caja con una muy amplia frontera y el lado cercano, con una amplia frontera transparente:

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

funciona muy bien, pero cuando intento de aplicar una caja de sombra de la sombra va alrededor de la plaza de cerramiento ... no es el triángulo:

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

¿Cómo consigo un triángulo utilizando sólo css/html con una gota de sombra?

Answer 1

Parece imposible. Definitivamente usando una imaginacion es una solucion mucho mas facil. He hecho algo parecido a un triángulo :) http://jsfiddle.net/5dw8M/109/. Lo siento, no puedo dejar un comentario debajo de tu publicación. Puede ser que sirva como una inspiración para alguien;

Answer 2

¿Qué hay de poner otro div con propiedades similares y jugar con las posiciones? algo así como http://jsfiddle.net/eveevans/JWGTw/

Answer 3

¿<canvas> con una PNG de respaldo sería una opción?

Demostración: jsfiddle.net/Marcel/3dbzm/1

Answer 4

crear un duplicado de ese triángulo, decolorar, darle un valor de índice z negativa usando css y, finalmente, fuera del centro con posicionamiento CSS.

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

Answer 5

Usted puede utilizar la propiedad "transformar" para girar un cuadrado de 45 grados y ocultar la mitad de ella, pero no todos los navegadores apoyarlo, por lo que tendrá un repliegue.

.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); 
}​ 

Demo on jsfiddle.

levantado de this CSS Tricks page con modificaciones.

Answer 6

Probablemente la mejor opción es usar filter:

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