Colore bordo personalizzato triangolo CSS


114

Tentativo di utilizzare un colore esadecimale personalizzato per il mio triangolo CSS (bordo). Tuttavia, poiché utilizza le proprietà del bordo, non sono sicuro di come procedere. Vorrei evitare javascript e css3 semplicemente a causa della compatibilità. Sto cercando di fare in modo che il triangolo abbia uno sfondo bianco con un bordo di 1px (attorno ai lati angolati del triangolo) con il colore # CAD5E0. È possibile? Ecco cosa ho finora:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}​

Il mio violino: http://jsfiddle.net/4ZeCz/

Risposte:


185

In realtà devi fingere con due triangoli ....

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

Violino aggiornato qui

inserisci qui la descrizione dell'immagine


1
È perfetto! esattamente quello di cui avevo bisogno. Grazie.
Ed R

1
hey, non capisco come modificherei il triangolo in modo che appaia sull'altro lato della scatola (non capisco come funziona il triangolo CSS)
Kevin

1
SMRT - Sei così intelligente!
Code Whisperer

5
Nota, per quelli con la stessa domanda di @ Kevin. Guarda l' border-colorattributo, a seconda del bordo colorato il triangolo punterà in una direzione diversa. Per attivare la freccia al punto di cambio sinistra border-colora transparent #e3f5ff transparent transparent;in entrambi, .container:aftere.container:before
rmagnum2002

1
@Scott Grazie per questo! Il tuo JS Fiddle era perfetto! Tuttavia, fai attenzione a copypasta da JSFiddle, ha aggiunto due caratteri invisibili e non validi nel mio file CSS che hanno causato errori di convalida / analisi in quel file css. Una volta rimossi i caratteri invisibili (i caratteri erano di larghezza zero, quindi il cursore non li mostrava, ma sono stato in grado di tornare indietro) ha funzionato meravigliosamente. Non era il tuo codice il problema, penso che JS Fiddle abbia introdotto alcuni personaggi misteriosi nel codice visualizzato? Non lo so, ma volevo solo menzionarlo per l'amor dei posteri, nel caso qualcuno si imbattesse nello stesso problema.
hypervisor666

91

So che lo accetti ma controlla anche questo con meno css:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/


hey, non capisco come modificherei il triangolo in modo che appaia sull'altro lato della scatola (non capisco come funziona il triangolo CSS)
Kevin

2
@Kevin lo creo per favore controlla jsfiddle.net/4ZeCz/97 . Prova a giocare con le proprietà che ho usato e se hai qualche domanda puoi chiedermi :)
sandeep

3
Una spiegazione: questo crea un normale elemento quadrato con bordi su due lati adiacenti, formando un triangolo inclinato. Quindi il quadrato è inclinato di 45 gradi, quindi il triangolo punta verso l'alto (o dove vuoi). A proposito, hai solo bisogno del -webkit-prefisso ora (e -ms-per IE9). Tutti gli altri browser lo supportano senza prefisso.
rvighne

Soluzione molto intelligente! Grazie.
Solhan

3

Penso che questo sia più semplice usando clip-path :

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}
<div class="container">
test content
</div>


1

Un altro modo per ottenere ciò, specialmente per qualcuno che ha bisogno di questo per lavorare con triangoli equilateri o addirittura scaleni come ho fatto io, è usare filter: drop-shadow(...)con più valori e senza raggio di sfocatura. Questo ha il vantaggio aggiuntivo di non aver bisogno di più elementi o di accedere a entrambi : prima e: dopo (stavo cercando di ottenere questo risultato con: dopo il contenuto che era in linea, quindi volevo evitare anche il posizionamento assoluto).

Nel caso precedente, il CSS di: after potrebbe essere simile a questo ( violino ):

.container {
  margin-left: 15px;
  width: 200px;
  background: #FFFFFF;
  border: 1px solid #CAD5E0;
  padding: 4px;
  position: relative;
  min-height: 200px;
}
.container:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
  Test Container
</div>

Penso che ci siano alcune limitazioni o stranezze, però:

  • Nessun supporto in IE11 (anche se sembra a posto in FF, Chrome e Edge)
  • Non sono del tutto sicuro del motivo per cui .5px per il <offset-y>valore nella seconda ombra esterna () sopra appaia più come 1px di 1px, sebbene immagino sia correlato alla trigonometria (anche se almeno sul mio monitor non vedo differenze tra il valori effettivi basati su trig o .5px o anche .1px per quella materia).
  • I bordi superiori a 1 px (beh, il loro aspetto in questo modo) non sembrano funzionare bene. O almeno non ho trovato la soluzione, anche se vedi sotto per un modo non ottimale per andare un po 'più in grande. (Penserei che il quarto parametro ( <spread-radius>) di drop-shadow () documentato ma non supportato potrebbe essere quello che sto veramente cercando invece di più valori di filtro, ma aggiungerlo ha semplicemente rotto le cose.) Qui puoi vedere cosa inizia ad accadere quando si va oltre 1px ( violino ):

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
  Test Container
</div>

Notare la stranezza che il primo (verde) viene applicato una volta, ma il secondo (rosso) viene applicato sia al triangolo giallo creato tramite il bordo che all'ombra verde () e all'ultimo (blu) viene applicato a tutto quanto sopra. (Forse è anche correlato all'aspetto .5px).

Ma immagino che tu possa sfruttare queste ombre che si accumulano l'una sull'altra se hai bisogno di qualcosa di più ampio di 1px, cambiandole in qualcosa di simile al seguente ( violino ):

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

dove il primo ha un raggio di sfocatura impostato (2.5px in questo caso, anche se il risultato appare moltiplicato), e tutto il resto ha sfocatura a 0. Ma questo funzionerà solo per lo stesso colore su tutti i lati, e risulta in alcuni angoli dall'aspetto arrotondato e bordi piuttosto ruvidi più si va.


0
.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.