Wie erstelle ich einen ausgefallenen Pfeil mit CSS?

102

Ok, jeder weiß, dass Sie damit ein Dreieck bilden können:

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

Und das ergibt ein festes, ausgefülltes Dreieck. Aber wie würden Sie so ein hohles pfeilartiges Dreieck herstellen?

Ein Pfeil mit nur zwei Linien, die sich am Punkt schneiden. Wie ein Größer als Zeichen:>

html  css  css-shapes 
— Tommay
quelle
3
Zwei gedrehte Rechtecke.
— SLaks
51
— j08691
5
Verwenden Sie eine sehr große Schrift?
— GolezTrol
2
AAAAAHHHH. j08691 hat es verstanden. Vielen Dank!
— Heute
4
Check @ j08691 Fiddle es richtig auf das Geld. Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung eines Schriftpakets wie Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-right
— crazymatt

Antworten:

93

Sie können das beforeoder afterPseudo-Element verwenden und etwas CSS darauf anwenden. Es gibt verschiedene Möglichkeiten. Sie können beide beforeund afterund hinzufügen und jeden von ihnen drehen und positionieren, um einen der Balken zu bilden. Eine einfachere Lösung besteht darin, nur dem beforeElement zwei Ränder hinzuzufügen und es mit zu drehen transform: rotate.

Scrollen Sie nach unten, um eine andere Lösung zu finden, bei der anstelle der pseuso-Elemente ein tatsächliches Element verwendet wird

In diesem Fall habe ich die Pfeile als Aufzählungszeichen in eine Liste eingefügt und emGrößen verwendet, damit sie mit der Schriftart der Liste richtig dimensioniert werden.

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>
Erweitern Sie das Snippet

Natürlich müssen Sie nicht verwenden beforeoder after, Sie können den gleichen Trick auch auf ein normales Element anwenden. Für die obige Liste ist dies praktisch, da Sie kein zusätzliches Markup benötigen. Aber manchmal möchten (oder brauchen) Sie das Markup trotzdem. Sie können ein divoder spandafür verwenden, und ich habe sogar gesehen, dass Leute das iElement sogar für "Symbole" recyceln . Das Markup könnte also wie folgt aussehen. Ob <i>dies richtig ist, ist umstritten, aber Sie können auch span verwenden, um auf der sicheren Seite zu sein.

/* 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.
Erweitern Sie das Snippet

Wenn Sie mehr Inspiration suchen, sollten Sie sich diese fantastische Bibliothek mit reinen CSS-Symbolen von Nicolas Gallagher ansehen . :) :)

— GolezTrol
quelle
Dies hat ziemlich gut funktioniert, aber es gibt ein paar Dinge, die geändert werden müssen. 1. Wie würde ich den Pfeil leicht nach unten bewegen, ohne den Rest des Textes damit nach unten zu bewegen? Ich habe #arrow :: after ausprobiert und dann einen Rand oben gesetzt, aber das hat alles nach unten verschoben, einschließlich des Textes. 2. Ich brauche es, um die Farbe beim Mouseover zu ändern. Im Moment ändert nur der Text die Farbe. Wie würde ich sowohl den Text als auch den Pfeil ändern lassen?
— Heute
Um die Farbe des Pfeils zu ändern, müssen Sie die ändern border-color, da der Pfeil eigentlich kein Zeichen, sondern ein Rand ist. Zum Positionieren können Sie position: relativeden Pfeil hinzufügen und mit topund verschieben left. Ich habe sowohl im modifizierten ersten Snippet als auch die Positionierung im zweiten Snippet gezeigt. Beachten Sie die schöne Kombination, li:hover::beforedie sich auf das beforePseudoelement eines schwebenden Listenelements bezieht .
— GolezTrol
Eigentlich noch eine Sache: Also versuche ich jetzt, diesen Text zu zentrieren (mit dem after-Element). Das Problem ist, dass dieses After-Element anscheinend viel unsichtbaren Platz einnimmt und der Text daher extrem außermittig zu sein scheint. Wie würde ich diesen unsichtbaren Raum auf 0 setzen? Ich habe versucht, links: 0 und rechts: 0, zusammen mit Rand-links: 0 und Rand-rechts: 0, beide haben nicht funktioniert.
— Heute
Ich bin mir nicht ganz sicher, was Sie meinen, aber das Pseudoelement hat bereits einen eigenen Rand 0, sodass Sie einen negativen Rand benötigen würden, um Leerzeichen aufzuheben. Im zweiten Snippet können Sie beispielsweise hinzufügen margin-left: -0.4em;, dass der Pfeil ohne Leerzeichen neben dem vorherigen Wort steht.
— GolezTrol
Ich habe eine neue Frage unter stackoverflow.com/questions/27549099/… gestellt
— Heute,
71

Dies kann viel einfacher gelöst werden als die anderen Vorschläge.

Zeichnen Sie einfach ein Quadrat und wenden Sie eine borderEigenschaft auf nur 2 Verbindungsseiten an.

Drehen Sie dann das Quadrat entsprechend der Richtung, in die der Pfeil zeigen soll, zum Beispiel: 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>
Erweitern Sie das Snippet

— Alan Dunning
quelle
1
Danke @Karlth, schade, dass es nicht die akzeptierte Antwort ist, da es viele der Komplexitäten beseitigt
— Alan Dunning
Dies ist die perfekte Antwort, es muss wirklich die akzeptierte sein. Sehr einfach und genauso effektiv.
— Andrew Faulkner
@ AndrewFaulkner Ich bin froh, dass es geholfen hat.
— Alan Dunning
38

Reaktionsschnelle Chevrons / Pfeile

sie die Größe automatisch mit Ihrem Text und farbigen die gleiche Farbe. Plug and Play :)
jsBin Demo-Spielplatz

Geben Sie hier die Bildbeschreibung ein

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
Erweitern Sie das Snippet

— Roko C. Buljan
quelle
1
Wow, dieses Symbol heißt eigentlich "Oben rechts" ! Nett. :) Weniger Kontrolle über die Breite als mit einem Rand, aber immer noch +1, um die Möglichkeit von Schriftarten anzuzeigen. Für andere Symbole ist dies möglicherweise besser als ein CSS-Formtrick.
— GolezTrol
Beachten Sie, dass Schriftartensymbole nicht gut funktionieren, wenn der Benutzer nicht über die Schriftart verfügt. Stellen Sie daher sicher, dass die Schriftarten, die für die meisten Systeme verfügbar sind, ordnungsgemäß zurückgesetzt werden. Sie können die Schriftart auch über CSS herunterladen, aber es ist eine Verschwendung von Bandbreite, dies für einige Symbole zu tun. Wenn Sie jedoch viele Symbole haben oder diese in Ihrem eigenen Stil haben möchten, können Sie alle zu Ihrer eigenen Symbolschrift hinzufügen und diese über CSS laden. Auf diese Weise sind Sie (fast) sicher, dass Sie die richtige Schriftart zur Verfügung haben, ohne große Schriftarten für eine Handvoll Symbole herunterladen zu müssen.
— GolezTrol
Zurück in HTML 4.0 wurde ein Gesamtsatz mit 38887 Zeichen übernommen. Da die Anzahl der v. 6.2.0 September 2012 1Unicode- UTF-8Zeichen auf 110182 ansteigt und HTML5 und das Standard-UTF-8 jetzt angezeigt werden, sieht unser Zeichen gut aus: unicode.org/Public/UNIDATA/UnicodeData.txt
— Roko C. Buljan
Die Tatsache, dass das Zeichen existiert, bedeutet nicht, dass es angezeigt werden kann. Sie benötigen die richtige Schriftart, um sie anzuzeigen. Das ist der Grund, warum die Zeichen in der ersten Version Ihrer Antwort fehlgeschlagen sind: weil die Standardschriftart meines Browsers diese Zeichen nicht enthielt. Um ein solches Zeichen zu verwenden, müssen Sie angeben, welche Schriftarten verwendet werden sollen, und Sie müssen anderen Schriftarten geeignete Fallbacks bereitstellen, wenn sie nicht auf allen Plattformen verfügbar sind. Zum Beispiel \231dkönnte der Charakter hier verfügbar sein, aber nicht auf einem Mac oder einem Android-Gerät. HTML-Version und Antwortkodierung haben nichts damit zu tun.
— GolezTrol
Kannst du es dünner machen? Anstatt so fett zu sein? Das Ändern der Schriftgröße bewirkt nichts.
— James111
14

Hier ist ein anderer Ansatz:

1) Verwenden Sie das Multiplikationszeichen: &times;×

2) Verstecke die Hälfte davon mit overflow:hidden

3) Fügen Sie dann ein Dreieck als Pseudoelement für die Spitze hinzu.

Der Vorteil hierbei ist, dass keine Transformationen notwendig sind. (Es wird in IE8 + funktionieren)

GEIGE

.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>
Erweitern Sie das Snippet

— Danield
quelle
2
Funktioniert in Internet Explorer, Chrome und Firefox.
— Thomas
11

Verwenden Sie einfach vor und nach Pseudo-Elementen - 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/>
Erweitern Sie das Snippet

— Gildas.Tambo
quelle
8

Ein anderer Ansatz Grenzen und keine CSS3 - Eigenschaften:

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>
Erweitern Sie das Snippet

— Web-Tiki
quelle
4

>selbst ist sehr wunderbarer Pfeil! Stellen Sie einfach ein Div damit voran und stylen Sie es.

div{
  font-size:50px;
}
div::before{
  content:">";
  font: 50px 'Consolas';
  font-weight:900;
}
<div class="arrowed">Hatz!</div>
Erweitern Sie das Snippet

— nicael
quelle
2
Das ist ein "größer als" Symbol, kein Pfeil.
— Mark Knol
@MarkKnol Was ist der Unterschied zwischen diesem und dem Aussehen des Pfeils aller anderen? Dies scheint mir die bisher beste Lösung zu sein.
— Dallas
2

Links Rechts Pfeil mit Hover-Effekt mit Roko C. Buljan Box-Shadow-Trick

.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>
Erweitern Sie das Snippet

— vinayakj
quelle
1

Ich musste inputin meinem Projekt einen in einen Pfeil ändern . Unten ist die letzte Arbeit.

#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">
Erweitern Sie das Snippet

Hier Geige

— Mostafa
quelle
Super Code! Es wird nur ein Element verwendet, was schwierig ist :)
— 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>
Erweitern Sie das Snippet

Ähnlich wie Roko C, jedoch etwas mehr Kontrolle über Größe und Platzierung.

— Bob
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.