Triángulo de CSS puro con borde semitransparente. ¿Posible?

Question

¿Es posible dibujar una flecha que tenga un borde semitransparente a su alrededor simplemente usando css?

Heres un violín de mi esfuerzo hasta el momento: http://jsfiddle.net/calebo/fBW4u/

CSS:

.ui-overlay { 
    padding-bottom: 10px; 
    position: relative; 
} 
.ui-overlay-content { 
    background: #999; 
    color: #000; 
    padding: 8px; 
    border-radius: 4px; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    background-clip: padding-box; 
    height: 100px; 
    width: 200px; 
} 
.arrow { 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    border-width: 10px 10px 0; 
    bottom: 5px; 
    left: 15px; 
    width: 0; 
    height: 0; 
    position: absolute; 
    overflow: hidden; 
} 

Answer 1

Esto todavía necesita algo de trabajo, pero aquí está la idea general:

Utilice un pseudo elemento, gírelo 45deg y aplique el estilo a eso:

.arrow { 
    bottom: -25px; 
    left: 30px; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    overflow: hidden; 
} 
.arrow:after { 
    content: ' '; 
    display: block; 
    background: red; 
    width: 20px; 
    height: 20px; 
    transform: rotate(45deg); 
    position: absolute; 
    top: -19px; 
    left: 3px; 
    background: #999; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    background-clip: padding-box; 
} 

Aquí está el violín: http://jsfiddle.net/yZ3vB/

---

El problema con esto es que las fronteras se superponen, por lo que es más oscura por los bordes.

Sin embargo, esto probablemente podría remediarse agregando otro elemento.

Actualización: Sí! Aquí van: http://jsfiddle.net/sJFTT/

---

Actualización 2: Usted ni siquiera es necesario que el elemento adicional. Usted puede utilizar el elemento seudo desde el cuadro principal:

.ui-overlay-content:after { 
    content: ' '; 
    border-width: 13px; 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    bottom: -10px; 
    left: 30px; 
    width: 0; 
    height: 0; 
    position: absolute; 
} 

Aquí está el violín: http://jsfiddle.net/6v9nV/

---

Actualización 3: En realidad, se puede hacer todo esto con sólo un único elemento y sin transformación, mediante el uso de ambos pseudo-elementos: el before y el after:

.speech-bubble { 
    background: #999; 
    background: linear-gradient(top, #444 0%,#999 100%); 
    background-clip: padding-box; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    padding: 20px; 
    width: 200px; 
    height: 100px; 
    position: relative; 
} 
.speech-bubble:before{ 
    content: ' '; 
    border-color: rgba(0, 0, 0, 0.2) transparent transparent; 
    border-style: solid; 
    border-width: 17px; 
    position: absolute; 
    bottom: -39px; 
    left: 16px; 
} 
.speech-bubble:after{ 
    content: ' '; 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    border-width: 13px; 
    position: absolute; 
    bottom: -26px; 
    left: 20px; 
} 

Aquí está el violín: http://jsfiddle.net/95vvr/

---

P. S. ¡No olvide los prefijos del vendedor en producción!

Answer 2

Necesita recortar la imagen y colocarla absolutamente en la esquina inferior derecha.