Inserire uno sfondo di immagine su un triangolo CSS

Sto provando a inserire un'immagine di sfondo su un div che sta usando i bordi CSS per creare un triangolo. Questo è il mio attuale impegno fino ad ora. Funziona bene con colori a tinta unita, ma io sono in perdita quando si tratta di immagini.Inserire uno sfondo di immagine su un triangolo CSS

HTML

<div class="wrapper"> 
    <div class="left triangle"></div> 
    <div class="right triangle"></div> 
</div>

CSS

.wrapper { 
    padding:50px 0px; 
    height: 50px; 
    position: relative; 
    width: 300px; 
    background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg"); 
} 

.triangle { 
    border-bottom: 50px solid #eee; 
    width: 50px; 
    position: absolute; 
    bottom: 0; 
} 

.right { 
    right: 0; 
    border-left: 100px solid transparent; 
} 

.left { 
    left: 0; 
    border-right: 100px solid transparent; 
}

jsfiddle: http://jsfiddle.net/aRS5g/9/

così, guardando quel JS Fiddle, come potrei fare quella zona grigia anche lo sfondo di un'immagine della mia scelta, piuttosto che dover usare colori come # 111, #eee, ecc.

fonte

2013-05-14 user2380171

Provare; ma se usi già l'immagine, perché non creare immagini a triangolo e trasparenti 'div's e metterle all'angolo? – Passerby

Perché è su un layout reattivo. la larghezza dei triangoli dipende dalla dimensione sullo schermo. Nonostante ciò, la tua idea ha ancora un valore - potrei renderli insolitamente lunghi in modo che possano andare bene su tutte le dimensioni dello schermo. Grazie per il suggerimento. – user2380171

http://stackoverflow.com/questions/23758922/transparent-arrow-triangle – pathfinder

Un triangolo in CSS è un trucco, creato visualizzando parti del bordo di un elemento. Pertanto, il triangolo che vedi non è un elemento stesso, ma un bordo CSS.

Il bordo non può essere stilizzato utilizzando il normale stile CSS background-image, ed è qui che si iniziano a vedere le limitazioni dei triangoli CSS e perché si tratta di un trucco piuttosto che di una buona tecnica.

C'è una soluzione CSS che può funzionare per voi: border-image.

border-image è uno stile CSS che fa ciò che ti aspetteresti; mette un'immagine nel bordo di un elemento. Dato che il triangolo CSS è un bordo, puoi usarlo per inserire un'immagine di sfondo sul tuo triangolo.

Tuttavia, le cose si complicano. Lo stile border-image è progettato per disegnare i bordi, non i triangoli; ha caratteristiche per lo styling di angoli e lati e allunga le immagini in modo appropriato. Non l'ho provato con un triangolo, ma posso prevedere che potrebbe avere alcune stranezze che lo rendono difficile da usare. Ma sentiti libero di provarlo.

L'altro problema con border-image è il supporto del browser. È uno stile CSS relativamente nuovo ed è completamente non supportato in molti browser correnti, incluse tutte le versioni di IE. Puoi vedere l'intera tabella di supporto del browser per questo allo CanIUse.

A causa di tutti questi problemi, suggerirei che se si desidera disegnare forme nel browser, si dovrebbe prendere in considerazione la possibilità di eliminare gli hack CSS e utilizzare SVG o Canvas. Questi sono ben supportati nella maggior parte dei browser e ovviamente supportano tutte le funzionalità di disegno che si possono desiderare.

I triangoli CSS sono ottimi per creare la forma occasionale delle frecce, ma per qualcosa di più complesso di così è molto più facile usare una grafica corretta piuttosto che cercare di ammassare sempre più hack nel codice CSS.

fonte

2013-05-14 06:59:22 Spudley

nice answer, +1 –

Impostazione come risposta accettata, molto concisa. Grazie per l'informazione, anche se il percorso che ho seguito è stato quello di utilizzare un .PNG con trasparenza per emulare l'effetto. – user2380171

http://stackoverflow.com/questions/23758922/transparent-arrow-triangle – pathfinder

-5

Per dare un div un'immagine di sfondo è necessario aggiungere la regola CSS

background-image:url("your image url here");

Così il vostro .triangle classe sarebbe simile a questa

.triangle { 
background-image:url("your url here"); 
background-repeat:no-repeat; 
border-bottom: 50px solid #eee; 
width: 50px; 
position: absolute; 
bottom: 0; 
}

a seconda anche l'immagine di sfondo su si dovrebbe impostare il background-repeat. repeat-x fa ripetere l'immagine a sinistra ea destra (asse x) mentre ripetizione-y ripete l'immagine su e giù (asse y). Se non vuoi ripetere l'immagine usa solo la non ripetizione, ma ti consiglio di usare altezza e larghezza fisse.

fonte

2013-05-14 05:42:07 RynoZ

Inserire uno sfondo di immagine su un triangolo CSS

risposta

Problemi correlati