Wie man einen nach rechts zeigenden Pfeil mit CSS macht

Question

Ich erstelle einige benutzerdefinierte Formen mit CSS Ich möchte einen Pfeil zeichnen, dessen Zeiger auf der rechten Seite ist und links auf das div ausgerichtet ist die linke, aber ich habe Schwierigkeiten, einen Pfeil zu machen, dessen Zeiger auf der rechten Seite ist. Hier ist ein Bild davon, wie ich will es
arrow

Hier ist mein HTML-Code

<div class="arrow"> 
    <img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive"> 
</div> 

css

.arrow { 
    position: relative; 
} 

.arrow::after { 
    position: absolute; 
    content: ''; 
    width: 0; 
    height: 0; 
    left: 0; 
    border-style: solid; 
    border-width: 18px 30px 18px 0; 
    border-color: transparent #fff transparent transparent; 
    bottom: 45px; 
} 

FIDDLE

Answer 1

Sie einfach die Links/Rechts-Werte erforderlich tauschen Ihrer border Regeln, um den Pfeil das Gegenteil Directio Gesicht zu machen n. dieser

Wechsel:

border-width: 18px 30px 18px 0; 
border-color: transparent #fff transparent transparent; 

Um dies:

border-width: 18px 0 18px 30px; 
border-color: transparent transparent transparent #fff; 

Und dann Beispielbild entsprechen, änderte ich die 30px Seite auch 18px sein, ein gleichschenkliges Dreieck bilden.

.arrow { 
 
    position: relative; 
 
} 
 
.arrow::after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    left: 0; 
 
    border-style: solid; 
 
    border-width: 18px 0 18px 18px; 
 
    border-color: transparent transparent transparent #fff; 
 
    bottom: 45px; 
 
}

<div class="arrow"> 
 
    <img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive"> 
 
</div>

Answer 2

Werfen Sie einen Blick hier ich es tat (und machte Pfeil in rot, so wird es leichter sein, um zu sehen):

.arrow { 
    position: relative; 
    padding: 20px; 
} 
.arrow::after { 
    position: absolute; 
    z-index: 200; 
    content: ''; 
    width: 0; 
    height: 0; 
    left: 20px; 
    border-style: solid; 
    border-width: 22px 0 22px 17px; 
    border-color: transparent transparent transparent red; 
    bottom: 62px; 
}