Triangolo in CSS all'interno di una scatola

Question

Beh, non so come spiegarlo correttamente. Qui, controlla questo screenshot che ha ciò che voglio fare. Il mio designer mi ha dato questo. Se non trovo una soluzione userò immagini e nessun codice. È possibile farlo con CSS3?

Here is the image

Vedere il triangolo dentro quella scatola? Voglio farlo. Grazie!

Answer 1

Uso creativo dei bordi per ottenere questo effetto, nessuna immagine è stata danneggiata nel seguente esempio e si può anche impostare la posizione della freccia sull'elemento stesso - diventa più semplice se si può hardcode per il proprio disegno.

HTML

<div class="top"> 
    <span class="arrow" style="left:40%"></span> 
</div> 

CSS

.top { 
    background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg); 
    background-size:cover; 
    width:300px; 
    height:300px; 
    border:1px solid #888; 
    position:relative; 
    overflow:hidden; 
} 
.arrow { 
    border:30px solid #aaa; 
    border-bottom:none; 
    border-color:transparent #aaa transparent #aaa; 
    position:absolute; 
    left:0; 
    bottom:0; 
} 
.arrow:before, .arrow:after { 
    content:''; 
    position:absolute; 
    width:5000px; 
    bottom:0; 
    height:30px; 
    background:#aaa; 
} 
.arrow:before { 
    right:30px; 
} 
.arrow:after { 
    left:30px; 
} 

Working JSfiddle sample.

Or the full integrated sample here.