Colore bordo CSS in 4 colori

1

complicato ma fresco soluzione: utilizzare SVG (ad esempio <svg> tag), aggiungere 4 percorsi, assegnare differenti stroke-dasharray e stroke-color attributi.

Soluzione più semplice e tranquilla: prova border-image. (Vedi la risposta di Harry)

Soluzione molto semplice se hai solo bisogno di un bordo: crea un'immagine, ma come immagine di sfondo, ripeti solo su un asse, posizionala sul bordo del contenitore, ad es. (Per bordo inferiore)

.container { 
    background-image: url(image.png); 
    background-repeat: repeat-x; 
    background-position: bottom left; 
}

fonte

2015-09-25 11:42:35 opatut

11

È possibile utilizzare la proprietà border-image per creare un bordo gradiente con 4 colori. Normalmente le sfumature si spostano gradualmente da un colore all'altro e produce un effetto sfocato ma impostando il valore color-stops (i valori percentuali) in modo che il punto finale di un colore sia uguale al punto iniziale del colore successivo, i colori arrivano a un hard stop e quindi finiscono per produrre effetti simili a blocchi.

Il bordo può essere impostato sul lato richiesto modificando border-image-width e la direzione del gradiente. Ad esempio, i bordi inferiori superiori & richiedono che il gradiente passi da sinistra a destra mentre a sinistra & i bordi a destra necessitino del gradiente per passare da inferiore a in basso.

I gradienti utilizzano valori percentuali per la dimensione (e il colore-stop) e quindi sono responsive per impostazione predefinita e possono adattarsi automaticamente anche se le dimensioni del contenitore cambiano.

L'unico inconveniente di utilizzare border-image è il poor browser support per questa proprietà al momento. IE10- non supporta questa proprietà.

.bordered-top { 
 
    border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 4px 0px 0px 0px; 
 
} 
 
.bordered-bottom { 
 
    border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 0px 0px 4px 0px; 
 
} 
 
.bordered-left { 
 
    border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 0px 0px 0px 4px; 
 
} 
 
.bordered-right { 
 
    border-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    border-image-slice: 1; 
 
    border-image-width: 0px 4px 0px 0px; 
 
} 
 
div { 
 
    height: 100px; 
 
    width: 300px; 
 
    padding: 10px; 
 
    background: beige; 
 
    margin: 10px; 
 
}

<!-- library added only for old browser support --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<div class='bordered-top'>Border only on top</div> 
 
<div class='bordered-bottom'>Border only on bottom</div> 
 
<div class='bordered-left'>Border only on left</div> 
 
<div class='bordered-right'>Border only on right</div>

Per il supporto IE10 +, è possibile simulare lo stesso comportamento utilizzando gradienti per la proprietà background-image invece di border-image come nel frammento qui sotto.

differenza con border-image, qui il lato su cui è applicato il confine non può essere controllato usando l'border-image-width e dobbiamo utilizzare background-position invece per posizionare l'immagine nella posizione desiderata.

Il background-size determina lo spessore del bordo. Per superiore & bordi inferiori, la dimensione nell'asse x deve essere 100% e che nell'asse y è lo spessore del bordo.Per lasciato & con i bordi a destra, la dimensione nell'asse y deve essere 100% e che nell'asse x è lo spessore del bordo.

.bordered-top { 
 
    background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 100% 4px; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%; 
 
} 
 
.bordered-bottom { 
 
    background-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 100% 4px; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 100%; 
 
} 
 
.bordered-left { 
 
    background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 4px 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%; 
 
} 
 
.bordered-right { 
 
    background-image: linear-gradient(to bottom, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%); 
 
    background-size: 4px 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 100% 0%; 
 
} 
 
div { 
 
    height: 100px; 
 
    width: 300px; 
 
    padding: 10px; 
 
    background: beige; 
 
    margin: 10px; 
 
}

<!-- library added only for old browser support --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<div class='bordered-top'>Border only on top</div> 
 
<div class='bordered-bottom'>Border only on bottom</div> 
 
<div class='bordered-left'>Border only on left</div> 
 
<div class='bordered-right'>Border only on right</div>

fonte

2015-09-25 11:43:40 Harry

+1

Risposta completa, ottimo per l'OP che hai aggiunto esempi per tutti e quattro i lati per l'OP –

8

È possibile utilizzare box-shadow e afterpsuedo-element per fare questo

Quello che ho fatto:

ho creato un elemento :after sul fondo, poi aggiunse box-shadow s orizzontalmente con diverso colors

Se si desidera cambiare la forza del confine semplicemente dare maggiore altezza all'elemento :after

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    position: relative; 
 
    background: grey; 
 
} 
 
div:after { 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: ""; 
 
    width: 50px; 
 
    height: 5px; 
 
    background: green; 
 
    box-shadow: 50px 0 0 0 red, 100px 0 0 0 orange, 150px 0 0 0 green; 
 
}

<div></div>

stessa cosa su un grande div sarà come questo

div { 
 
    width: 500px; 
 
    height: 100px; 
 
    background: orange; 
 
    position: relative; 
 
} 
 
div:after { 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: ""; 
 
    width: 100px; 
 
    height: 5px; 
 
    background: green; 
 
    box-shadow: 100px 0 0 0 darkred, 200px 0 0 0 red, 300px 0 0 0 yellow, 400px 0 0 0 tomato; 
 
}

<div></div>

fonte

2015-09-25 11:44:14 Akshay

+1

Approccio davvero creativo! <3 – Pogrindis

+0

Funzionerà se le larghezze non sono fisse, ma in percentuale? – Vucko

+0

No, non penso che sia possibile @Vucko – Akshay

1

si può provare questo:

.solid{ 

    width: 300px; 
    border-image: linear-gradient(to right, red 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%); 
    border-image-slice: 4; 


}

DEMO

fonte

2015-09-25 11:46:53

+4

So che questo è un problema semplice e potresti aver trovato il codice da solo ma il modo in cui hai usato lo stesso 'width' lo stesso' border-image-slice 'e lo stesso ordine per i colori grida di plagio e copia. – Harry

+0

ya sei assolutamente corretto ora imparo così sry sir @ Harry –

3

ho preso quello che Harry aveva e modificato per soddisfare le mie esigenze. Ora ho:

border-image: linear-gradient(to right, #8CC63F 0%, #006F3B 25%, #ED1C24 25%, #9B1B1E 50%, #85CDEC 50%, #217EC2 75%, #FFC20E 75%, #F04E23 100%); 
    border-image-slice: 3; 
    border-image-width: 0px 0px 4px 0px; 
    border-image-repeat: round;

Questa è la soluzione migliore per le mie esigenze.

fonte

2015-09-25 12:03:23

+1

È bene che tu sia stato in grado di modificarlo in base alle tue esigenze. Le note di ringraziamento non sono generalmente richieste per domande/risposte e quindi l'ho rimosso. Non dimenticare di contrassegnare una risposta come accettata (potrebbe essere la tua risposta o la mia o qualsiasi altra qui dentro) poiché questo è il modo in cui SO contrassegna una domanda come risolta/risposta :) – Harry

0

La soluzione migliore è con linear-gradient. Decisamente. Ma qualcuno che è il principiante in questo potrebbe trovare questa soluzione utile. Usando 2-3-4 colori o anche di più, questo è il modo giusto per farli. Non è la soluzione migliore per questa domanda, ma forse qualcuno mentre legge questo vuole capire meglio come funzionano i colori con i bordi.

<html> 
 
<head> 
 
<style> 
 
p.one { 
 
    border-style: solid; 
 
    border-color: #0000ff; 
 
} 
 

 
p.two { 
 
    border-style: solid; 
 
    border-color: #ff0000 #0000ff; 
 
} 
 

 
p.three { 
 
    border-style: solid; 
 
    border-color: #ff0000 #00ff00 #0000ff; 
 
} 
 

 
p.four { 
 
    border-style: solid; 
 
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255); 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p class="one">One-colored border!</p> 
 
<p class="two">Two-colored border!</p> 
 
<p class="three">Three-colored border!</p> 
 
<p class="four">Four-colored border!</p> 
 

 
</body> 
 
</html>

fonte

2015-09-29 09:04:35

Colore bordo CSS in 4 colori

risposta

Problemi correlati