Frontiera per forme css

Ho scoperto forme di css e sono interessato c'è un modo per creare bordi (solidi, tratteggiati, tratteggiati) per loro (shapes)?Frontiera per forme css

La prima cosa che ho pensato era di creare un'altra forma e metterla sullo sfondo da z-index (http://jsfiddle.net/gYKSd/), ma ha effetto solo come bordo solido.

HTML:

<div class="triangle"></div> 
<div class="background"></div>

CSS:

 .triangle { 
     position: absolute; 
     top: 14px; 
     left: 10px; 
     height: 0px; 
     width: 0px; 
     border-right: 50px solid transparent; 
     border-left: 50px solid transparent; 
     border-bottom: 100px solid red; 
     z-index: 0; 
} 
     .background { 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 0px; 
     width: 0px; 
     border-right: 60px dotted transparent; 
     border-left: 60px dotted transparent; 
     border-bottom: 120px dotted gray; 
     z-index: -1; 
    }

fonte

2013-10-18 Vadim Kalinin

Fondamentalmente si non può farlo perché gli elementi sono fatti di confini ... e un bordo non può avere un altro confine. Questo non vuol dire che non puoi "fingere" aggiungendo elementi extra ma non è quello che hai chiesto. –

Le forme CSS sono un hack. Il CSS non è progettato per disegnare forme. Certo, usalo per triangoli di base se devi; tutti gli altri fanno. Ma non aspettarti che sia in grado di fare un ulteriore passo avanti, perché non puoi; la natura dell'hack è che è buono come si arriva. Se vuoi qualcosa di più, usa gli strumenti grafici del browser come SVG. – Spudley

@Paulie_D Sì, mi dispiace non è stato chiaro. Ma intendevo trucchi per risolvere questo compito. –

La soluzione (posizionare un div in background) è il modo più pratico per ottenere in CSS perché le forme non sono riconosciute dal browser come forme.

Puoi prendere un quadrato, fare copie e ruotarle per fare un punto di scoppio, e sembra un punto scoppiato ma per quanto riguarda il browser, hai 3 quadrati, non un punto di scoppio, e se tu metti un bordo, i bordi saranno intorno a ogni quadrato.

È possibile creare piccoli rettangoli, ruotarli e posizionarli sui bordi della "forma" per creare un "bordo", quindi sì, è fattibile, ma per tutti gli scopi pratici, è folle.

Se è necessario disegnare forme al volo, dare un'occhiata a tela HTML5 Intro to canvas drawing.

SVG è ora un'opzione valida anche since all recent browsers support it.

fonte

2013-10-18 17:03:38 Sylverdrag

e SVG :) e +1 – FelipeAls

Grazie. Hai ragione. Avevo rinunciato a svg tempo fa a causa del supporto del browser scarso, ma sembra che questo non è più un problema con i browser recenti. – Sylverdrag

@Sylverdrag Sapete cosa c'è di più sul canvas impegnativo o SVG. Perché non ho mai lavorato con SVG, ma con la tela ero abituato e non mi sembrava una cosa veloce. –

Non credo che sia possibile, perché quello che stai facendo si basa sul fatto che le forme sono fatte dai confini.

Non è possibile aggiungere bordi a ciò che è già un bordo.

Ma come hai mostrato nel tuo violino, puoi emulare un altro bordo avendo una forma di sfondo.

fonte

2013-10-18 16:07:18 Overcode

Come pochi detto sopra .... forme CSS sono realizzati con bordi solidi e gli angoli di coloro che si uniscono, quindi non è possibile cambiare lo stile di frontiera o non produrrebbe la forma che si voleva

fonte

2013-10-18 17:12:54 dougmays

Frontiera per forme css

risposta

Problemi correlati