Triangolo CSS puro con bordo semitrasparente. Possibile?

Question

E 'possibile disegnare una freccia che ha un bordo semitrasparente attorno ad esso semplicemente usando css?

Heres un violino di mio sforzo finora: 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

questo ha ancora bisogno di un po 'di lavoro, ma qui è l'idea generale:

Utilizzare una pseudo- elemento, ruotarlo di 45 gradi e applicare lo stile a quello:

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

Ecco il violino: http://jsfiddle.net/yZ3vB/

---

Il problema di questo è che i confini si sovrappongono, il che rende più scuro per i bordi.

Questo potrebbe probabilmente essere risolto aggiungendo un altro elemento.

Aggiornamento: Sì! Qui si va: http://jsfiddle.net/sJFTT/

---

Aggiornamento 2: non hai nemmeno bisogno di questo ulteriore elemento. È possibile utilizzare l'elemento pseudo dalla scatola principale:

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

Ecco il violino: http://jsfiddle.net/6v9nV/

---

Update 3: In realtà, si può fare tutto questo con appena un singolo elemento e senza trasformare, utilizzando entrambi gli pseudo-elementi - la before e 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; 
} 

Ecco il violino: http://jsfiddle.net/95vvr/

---

P.S. Non dimenticare i prefissi del produttore in produzione!

Answer 2

È necessario ritagliare l'immagine e posizionarla assolutamente nell'angolo in basso a destra.