Come creare una freccia fantasia usando i CSS?

102

Ok, quindi tutti sanno che puoi creare un triangolo usando questo:

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

E questo produce un triangolo pieno e pieno. Ma come faresti a creare un triangolo a forma di freccia di tipo vuoto, come questo?

una freccia con solo due linee che si intersecano nel punto. Come un segno di maggiore di:>

html  css  css-shapes 
— Tommay
fonte
3
Due rettangoli ruotati.
— SLaks
51
— j08691
5
Usi un carattere molto grande?
— GolezTrol
2
Aaaaahhhh. j08691 ce l'ha. Grazie!
— Tommay
4
Controllare @ j08691 Giocherellare il suo diritto sui soldi. Un altro modo per ottenere ciò è utilizzare un pacchetto di font come Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-right
— crazymatt

Risposte:

93

È possibile utilizzare il beforeo afterpseudo-elemento e applicare un po 'di CSS ad esso. Ci sono vari modi. È possibile aggiungere sia beforee after, sia ruotare e posizionare ciascuno di essi per formare una delle barre. Una soluzione più semplice consiste nell'aggiungere due bordi solo beforeall'elemento e ruotarlo utilizzando transform: rotate.

Scorri verso il basso per una soluzione diversa che utilizza un elemento reale invece degli elementi pseuso

In questo caso, ho aggiunto le frecce come punti elenco in un elenco e ho utilizzato le emdimensioni per ridimensionarle correttamente con il carattere dell'elenco.

ul {
    list-style: none;
}

ul.big {
    list-style: none;
    font-size: 300%
}

li::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}

/* Change color */
li:hover {
  color: red; /* For the text */
}
li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

<ul class="big">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
Espandi lo snippet

Ovviamente non è necessario utilizzare beforeo after, puoi applicare lo stesso trucco anche a un elemento normale. Per l'elenco sopra è conveniente, perché non hai bisogno di markup aggiuntivo. Ma a volte potresti volere (o aver bisogno) comunque del markup. Puoi usare divo spanper quello, e ho persino visto persone riciclare l' ielemento per le "icone". Quindi quel markup potrebbe apparire come di seguito. Se usare <i>per questo è giusto è discutibile, ma puoi usare span anche per questo per essere al sicuro.

/* Default icon formatting */
i {
  display: inline-block;
  font-style: normal;
  position: relative;
}

/* Additional formatting for arrow icon */
i.arrow {
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
}
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.
Espandi lo snippet

Se cerchi più ispirazione, assicurati di dare un'occhiata a questa fantastica libreria di icone CSS pure di Nicolas Gallagher . :)

— GolezTrol
fonte
Ha funzionato abbastanza bene, ma ci sono un paio di cose che devono essere modificate. 1. Come faccio a spostare leggermente la freccia verso il basso senza spostare il resto del testo verso il basso con essa? Ho provato #arrow :: after e poi ho impostato un margin-top, ma questo ha spostato tutto verso il basso, incluso il testo. 2. Ne ho bisogno per cambiare colore al passaggio del mouse. In questo momento, solo il testo cambia colore. Come cambierei sia il testo che la freccia?
— Tommay
Per cambiare il colore della freccia, sarà necessario modificare il border-color, poiché la freccia non è affatto un carattere ma un bordo. Per il posizionamento, puoi aggiungere position: relativealla freccia e spostarla usando tope left. Ho mostrato sia nel primo snippet modificato, sia il posizionamento anche nel secondo snippet. Nota la bella combinazione li:hover::beforeche si riferisce allo beforepseudo-elemento di un elemento di elenco al passaggio del mouse.
— GolezTrol
In realtà, ancora una cosa: quindi sto cercando di centrare questo testo ora (con l'elemento after). Il problema è che questo elemento dopo sta apparentemente occupando molto spazio invisibile, e di conseguenza il testo sembra essere estremamente decentrato. Come potrei impostare quello spazio invisibile su 0? Ho provato left: 0 e right: 0, insieme a margin-left: 0 e margin-right: 0, nessuno dei due ha funzionato.
— Tommay
Non sono esattamente sicuro di cosa intendi, ma lo pseudoelemento ha già un margine di 0da solo, quindi avresti bisogno di un margine negativo per cancellare qualsiasi spazio bianco. Ad esempio, nel secondo frammento, potresti aggiungere margin-left: -0.4em;per mettere la freccia accanto alla parola precedente senza spazio.
— GolezTrol
Ho inviato una nuova domanda a stackoverflow.com/questions/27549099/...
— Tommay
71

Questo può essere risolto molto più facilmente rispetto agli altri suggerimenti.

Disegna semplicemente un quadrato e applica una borderproprietà solo a 2 lati di giunzione.

Quindi ruota il quadrato in base alla direzione in cui vuoi che punti la freccia, ad esempio: transform: rotate(<your degree here>)

.triangle {
    border-right: 10px solid; 
    border-bottom: 10px solid;
    height: 30px;
    width: 30px;
    transform: rotate(-45deg);
}
<div class="triangle"></div>
Espandi lo snippet

— Alan Dunning
fonte
1
Questa è la risposta perfetta, deve davvero essere quella accettata. Molto semplice e altrettanto efficace.
— Andrew Faulkner
@AndrewFaulkner Sono contento che abbia aiutato.
— Alan Dunning
38

Frecce / frecce reattive

si ridimensionano automaticamente con il testo e sono colorati dello stesso colore. Plug and play :)
jsBin demo playground

inserisci qui la descrizione dell'immagine

body{
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
} 

/* RESPONSIVE ARROWS */
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);  -webkit-transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);   -webkit-transform:rotate(45deg);}
This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down
Espandi lo snippet

— Roko C. Buljan
fonte
1
Wow, quel simbolo in realtà si chiama "Angolo in alto a destra" ! Bello. :) Meno controllo sulla larghezza che con un bordo, ma ancora +1 per mostrare la possibilità di caratteri. Per altri simboli questo potrebbe essere migliore di un trucco di forma CSS.
— GolezTrol
Tieni presente che le icone dei caratteri non funzioneranno bene se l'utente non ha il carattere, quindi devi assicurarti di avere i fallback appropriati per i caratteri disponibili per la maggior parte dei sistemi. Potresti anche scegliere di scaricare il carattere tramite CSS, ma è uno spreco di larghezza di banda farlo per un paio di icone. Se hai molte icone, però, o vuoi averle nel tuo stile, potresti optare per aggiungerle tutte al tuo carattere icona e caricarlo tramite CSS. In questo modo sei (quasi) certo di avere il font giusto disponibile senza dover scaricare font enormi per una manciata di simboli.
— GolezTrol
In HTML 4.0 è stato adottato un set totale contenente 38887 caratteri. dal momento che v. 6.2.0 September 2012 1i UTF-8caratteri Unicode impostati aumentano a 110182, e ora con HTML5 e UTF-8 predefinito e sembra che il nostro personaggio abbia un bell'aspetto: unicode.org/Public/UNIDATA/UnicodeData.txt
— Roko C. Buljan
Il fatto che il personaggio esista non significa che possa essere visualizzato. Avrai bisogno del carattere appropriato per mostrarlo. Questo è il motivo per cui i caratteri nella prima versione della tua risposta non sono riusciti: perché il carattere predefinito del mio browser non includeva quei caratteri. Quindi, per usare un carattere come questo, dovrai specificare quali caratteri usare e devi fornire i fallback appropriati ad altri caratteri se non sono disponibili su tutte le piattaforme. Ad esempio, il \231dpersonaggio potrebbe essere disponibile qui, ma non su un Mac o un dispositivo Android. La versione HTML e la codifica della risposta non hanno nulla a che fare con questo.
— GolezTrol
Puoi renderlo più sottile? Invece di essere così grasso? La modifica dello spessore del carattere non fa nulla.
— James111
14

Ecco un approccio diverso:

1) Usa il carattere di moltiplicazione: &times;×

2) Nascondine metà con overflow:hidden

3) Quindi aggiungi un triangolo come pseudo elemento per la punta.

Il vantaggio qui è che non sono necessarie trasformazioni. (Funzionerà in IE8 +)

VIOLINO

.arrow {
  position: relative;
}
.arrow:before {
  content: '×';
  display: inline-block;
  position: absolute;
  font-size: 240px;
  font-weight: bold;
  font-family: verdana;
  width: 103px;
  height: 151px;
  overflow: hidden;
  line-height: 117px;
}
.arrow:after {
  content: '';
  display: inline-block;
  position: absolute;
  left: 101px;
  top: 51px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 24px;
  border-color: transparent transparent transparent black;
}
<div class="arrow"></div>
Espandi lo snippet

— danielD
fonte
2
Funziona con Internet Explorer, Chrome e Firefox.
— Thomas
11

Basta usare prima e dopo Pseudo-elementi - CSS 

*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
  margin: 20px auto;
  width: 150px;
  height: 150px;
  position:relative
}

div:before, div:after{
  content: '';
  position: absolute;
  width: 75px;
  height: 20px;
  background: black;
  left: 40px
}

div:before{
  top: 45px;
  transform: rotateZ(45deg)
}

div:after{
  bottom: 45px;
  transform: rotateZ(-45deg)
}
<div/>
Espandi lo snippet

— Gildas.Tambo
fonte
8

Un altro approccio che utilizza i bordi e nessuna proprietà CSS3 :

div, div:after{
    border-width: 80px 0 80px 80px;
    border-color: transparent transparent transparent #000;
    border-style:solid;
    position:relative;
}
div:after{
    content:'';
    position:absolute;
    left:-115px; top:-80px;
    border-left-color:#fff;
}
<div></div>
Espandi lo snippet

— web-tiki
fonte
4

>è di per sé una freccia meravigliosa! Basta anteporre un div con esso e definirlo.

div{
  font-size:50px;
}
div::before{
  content:">";
  font: 50px 'Consolas';
  font-weight:900;
}
<div class="arrowed">Hatz!</div>
Espandi lo snippet

— nicael
fonte
2
Quello è un simbolo "maggiore di", non una freccia.
— Mark Knol
@MarkKnol Qual è la differenza tra questo e l'aspetto della freccia di tutti gli altri? Questa sembra essere la migliore soluzione finora per me.
— dallin
2

Freccia sinistra destra con effetto hover usando il trucco box-shadow di Roko C. Buljan

.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
  transform: rotate(-45deg);
}
.arr.right {
  transform: rotate(135deg);
}
.arr:hover {
  box-shadow: 8px 8px 0 2px #000 inset
}
<div class="arr left"></div>
<div class="arr right"></div>
Espandi lo snippet

— vinayakj
fonte
1

Avevo bisogno di cambiare una inputin una freccia nel mio progetto. Di seguito è riportato il lavoro finale.

#in_submit {
  background-color: white;
  border-left: #B4C8E9;
  border-top: #B4C8E9;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  cursor: pointer;
}
<input id="in_submit" type="button" class="convert_btn">
Espandi lo snippet

Qui Fiddle

— Mostafa
fonte
Codice fantastico! Utilizza solo un elemento che è difficile da fare :)
— www139
0 

.arrow {
  display : inline-block;
  font-size: 10px; /* adjust size */
  line-height: 1em; /* adjust vertical positioning */
  border: 3px solid #000000;
  border-left: transparent;
  border-bottom: transparent;
  width: 1em; /* use font-size to change overall size */
  height: 1em; /* use font-size to change overall size */
}

.arrow:before {
  content: "\00a0"; /* needed to hook line-height to "something" */
}

.arrow.left {
  margin-left: 0.5em;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.arrow.right {
  margin-right: 0.5em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top {
  line-height: 0.5em; /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow.bottom {
  line-height: 2em;
  /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
<div>
  here are some arrows
  <div class='arrow left'></div> space
  <div class='arrow right'></div> space
  <div class='arrow top'></div> space
  <div class='arrow bottom'></div> space with proper spacing?
</div>
Espandi lo snippet

Simile a Roko C, ma un po 'più di controllo su dimensioni e posizionamento.

— peso
fonte
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.