triangolo CSS con immagine di sfondo

Question

stackoverflowers rispettati,

Come si crea un elemento di triangolo con il motivo di sfondo?

Per esempio ho bisogno del div in questo modo:

Ma il mio stato è come questo:

Tutti gli esempi con gli elementi del triangolo utilizzare i bordi che non puoi avere un img in quello ....

Questa è la mia classe di sottosezione che ha bisogno del coolarrow:

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div> 

.subsection { 
    .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3)); 
    background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern 
    display: block; 
    clear: both; 
    float: left; 
    width: 100%; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    display: none; 
} 
.subsection { 
    position:relative; 
} 
.subsection:before { 
    content:''; 
    position:absolute; 
    top:0; 
    left:0; 
    height:20px; 
    width:0; 
    border-left:20px solid white; 
    border-bottom:16px solid transparent; 
} 
.subsection:after { 
    content:''; 
    position:absolute; 
    top:36px; 
    left:0; 
    bottom:0; 
    width:0; 
    border-left:20px solid white; 
    border-top:16px solid transparent; 
} 

E nel mese di ottenere:

Che va bene ... Come posso portare la freccia in alto nella forma richiesta? ... e sovrapponendo i casi div? ... Grazie.

Answer 1

Se non si cura per la compatibilità cross browser, è possibile utilizzare uno pseudo-elemento che si ruota di 45 gradi e collegare gli stili ad esso. L'unica cosa che dovete inoltre sarebbe il fondo, ruotato (di nuovo) di 45 gradi per fissare l'elemento pseudo:

div.coolarrow:before { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: -24.7px; 
    left: 10px; 
    background-color: #bada55; 
    width: 50px; 
    height: 50px; 

    background: url(url/to/your/45deg/rotated/background.gif); 

    box-shadow: inset 0 0 10px #000000; 
    transform: rotate(45deg); 
} 

Ecco un breve violino per illustrare (senza sfondo):
Fiddle

Per risolvere questo problema per gli altri casi tranne le frecce a 90 gradi, è necessario inclinare il resto in eccesso. E io non so davvero cosa accade allora l'immagine di sfondo con ...

Answer 2

Metti l'immagine come sfondo per un div, e metti solo valori negativi per il margine per renderlo sovrapposto sulla barra. Esempio (anche se stimato, in nessun modo posso affermare che funzioni) sarebbe margin-left: -20px; margin-top: -20px; e averlo dopo la linea.

In alternativa, vai con la risposta di @ Py, e puoi usare questo CSS per la freccia e fare gli stessi margini negativi per farlo allineare.

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; } 

Answer 3

andare avanti http://apps.eky.hk/css-triangle-generator/ e generarlo: D

O

#triangle { 
    width: 0; 
    height: 0; 
    border-bottom: 120px solid green; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
}