CSS - Erstellen eines benutzerdefinierten Pfeils

Question

Hallo Ich versuche, einen benutzerdefinierten Pfeil in CSS zu erstellen, der wie das Bild unten aussieht.
Idealerweise möchte ich dies durch Überlagern von zwei Formen ein Dreieck und ein Rechteck erstellen (vielleicht mit CSS:after und :before) aber ich bin nicht zu versiert, wenn es um CSS geht, also habe ich gekämpft.Ich begann nur mit Grenzen aber sieht nicht wie es geht

Bisher arbeiten ich habe gerade:

.arrow { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 60px solid transparent; 
 
    border-bottom: 60px solid transparent; 
 
    border-left: 60px solid #ccc; 
 
}

<div class="arrow"></div>

Answer 1

nicht zu hart mit dem :before Pseudo-Elemente und einige Transformationen zu machen:

.container { 
 
    padding: 100px; 
 
} 
 

 
.arrow { 
 
    display: inline-block; 
 
    height: 150px; 
 
    background: #000; 
 
    width: 75px; 
 
} 
 
.arrow:before { 
 
    content: ""; 
 
    border-top: 100px solid #000; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 100px solid transparent; 
 
    transform: rotateZ(180deg) translateY(100%) translateX(31%); 
 
    position: relative; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="arrow"></div> 
 
</div>

Answer 2

Hier ist eine weitere Option.

.arrow{ 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 60px solid transparent; 
 
    border-bottom: 60px solid transparent; 
 
    border-left: 60px solid #ccc; 
 
    position: relative; 
 
    margin: 0 0 0 100px; 
 
} 
 

 
.arrow::before{ 
 
    content: ""; 
 
    height:50px; 
 
    width:80px; 
 
    background: #ccc; 
 
    position: absolute; 
 
    top: 0; 
 
    margin: -100%; 
 
    display: block; 
 
    transform: translateX(-160%) translateY(-50%); 
 
}

<div class="arrow"></div>

Answer 3

ein Rechteck erstellen und dann Dreieck mit :before Pseudoelement auf hinzufügen und das ist es.

.arrow { 
 
    width: 36px; 
 
    height: 50px; 
 
    background: #3F3F3F; 
 
    position: relative; 
 
    margin: 60px; 
 
} 
 
.arrow:before { 
 
    content: ''; 
 
    border-style: solid; 
 
    border-width: 0 40px 40px 40px; 
 
    border-color: transparent transparent #3F3F3F transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, -100%); 
 
}

<div class="arrow"></div>

Answer 4

zu erklären und zu veranschaulichen:

Ein CSS Pfeil wird durch Einfärben 1 Grenzseite angelegt und dann die anderen 3 Seiten in Richtung der Mitte der Form, wie transparent zu bewegen, so Sie zeigen nicht, sondern schneiden die verbleibende farbige Seite in ein Dreieck. Die Abkürzung dafür ist TOP RECHTS UNTEN LINKS. Um also ein nach oben zeigendes Dreieck zu bilden, verwenden Sie die dritte Eigenschaft oder den Boden.

Mit Pseudoelemente (sofern Sie den Pfeil auf ein anderes Element hinzugefügt wollen) benötigen Sie content:'', um das Pseudo-Element „zu schaffen“. Ich habe sie als display: block eingestellt, so dass sie im Fluss sind und miteinander interagieren (anstatt übereinander gelegt zu werden).

Mit dem Rechteck position: relative können Sie dann (die Hälfte der Dreiecksbreite) verwenden, um es in der Mitte des Dreiecks zu positionieren.

.arrowWrapper:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 60px 60px 60px; 
 
    border-color: transparent transparent black transparent; 
 
    /* border-color: TOP RIGHT BOTTOM LEFT; */ 
 
} 
 

 
.arrowWrapper:after { 
 
    content: ''; 
 
    position: relative; 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    background: black; 
 
    left: 30px; 
 
}

<div class="arrowWrapper"></div>

Answer 5

Lifted und modifiziert von http://www.cssportal.com/css3-shapes/:

#eq-triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 104px solid blue; 
 
    border-left: 60px solid transparent; 
 
    border-right: 60px solid transparent; 
 
} 
 

 
#rectangle { 
 
    width: 40px; 
 
    height: 80px; 
 
    background: blue; 
 
    margin-left: 40px; 
 
}

<div id="eq-triangle"></div> 
 
<div id="rectangle"></div>