Wie kann ich diese bestimmte Form erstellen?

Question

Gibt es eine einfachere oder bessere Möglichkeit, diese spezielle Form/Kombination von Formen in CSS3 zu erstellen, als was mache ich gerade? Ich habe schon ein paar verschiedene Dinge ausprobiert.

Das nach unten gerichtete Dreieck sollte knapp unter den drei Linien sitzen, aber ich kann es nicht scheinen, dort zu erhalten.

Ich möchte es so aussehen:

https://jsfiddle.net/s6bcjzjr/

.triangle-container { 
 
    top: 0; 
 
    width: 30px; 
 
    height: 40px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.triangle { 
 
    position: relative; 
 
    margin: auto; 
 
    top: 30px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 21px; 
 
    height: 21px; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    border-right: 2px solid #e74c3c; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.line { 
 
    width: 30px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
    margin-top: 3px; 
 
}

<a href="#" class="open"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="triangle-container"> 
 
     <div class="triangle"></div> 
 
    </div> 
 
</a>

Answer 1

Ich schalte den Rand des Dreiecks Behälter nach oben und angepasst die Margen

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.triangle-container { 
 
    top: 0; 
 
    width: 30px; 
 
    height: 40px; 
 
    position: relative; 
 
    border-top: 2px solid #e74c3c; 
 
    margin-top: 3px; 
 
} 
 
.triangle { 
 
    position: relative; 
 
    margin: auto; 
 
    top: -10.5px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 21px; 
 
    height: 21px; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    border-right: 2px solid #e74c3c; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.line { 
 
    width: 30px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
    margin: 3px 0 0 0; 
 
}

<a href="#" class="open"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="triangle-container"> 
 
    <div class="triangle"></div> 
 
    </div> 
 
</a>

Answer 2

.triangle-container { 
top: 0px; 
width: 30px; 
height: 1px; 
position: relative; 
border-top: 2px solid #e74c3c; 
margin-top: 3px; 
} 

.triangle { 
position: absolute; 
margin: auto; 
top: -12px; 
left: 0; 
right: 0; 
width: 21px; 
height: 21px; 
transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
border-right: 2px solid #e74c3c; 
border-bottom: 2px solid #e74c3c; 
} 

.line { 
width: 30px; 
position: relative; 
border-bottom: 2px solid #e74c3c; 
margin-top: 3px; 
} 

Answer 3

.triangle-container { 
    top: -35px; 
    width: 30px; 
    height: 40px; 
    position: relative; 
    border-bottom: 2px solid #e74c3c; 
} 

https://jsfiddle.net/s6bcjzjr/6/

Answer 4

i Ihre Geige aktualisiert haben und nun Ihre Form perfekt aussieht. Was ich getan habe, um die border-bottom zu border-top des triangle-container verändert und angepasst height und margin das Dreieck perfekt
hier ist die Geige auszurichten - https://jsfiddle.net/s6bcjzjr/5/

Answer 5

Die Antwort lautet:

.triangle-container { 
    top: -36px; 
} 

---

See es hier:

.triangle-container { 
 
    top: -36px; 
 
    width: 30px; 
 
    height: 40px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.triangle { 
 
    position: relative; 
 
    margin: auto; 
 
    top: 30px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 21px; 
 
    height: 21px; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    border-right: 2px solid #e74c3c; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.line { 
 
    width: 30px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
    margin-top: 3px; 
 
}

<a href="#" class="open"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="triangle-container"> 
 
     <div class="triangle"></div> 
 
    </div> 
 
</a>

Answer 6

A ein Verfahren Element mit vor und nach (fiddle):

<a href="#" class="open down-arrow"></a> 

.down-arrow { 
    display: inline-block; 
    position: relative; 
    width: 30px; 
    height: 14px; 
    border-top: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
} 

.down-arrow::before { 
    display: block; 
    position: absolute; 
    top: 3px; 
    right: 0; 
    left: 0; 
    height: 3px; 
    border-top: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
    content: ''; 
} 

.down-arrow::after { 
    display: block; 
    position: relative; 
    top: 4px; 
    left: 0; 
    right: 0; 
    width: 21px; 
    height: 21px; 
    margin: 0 auto; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    border-right: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
    content: ''; 
} 

Answer 7

Mit SVG:

Sie können diese einfach mit SVG erstellen. Es gibt nichts Komplexes und alles, was Sie benötigen würden, ist drei Linienelemente und ein Pfadelement.

• Alle drei line Elemente zwei Koordinaten, wobei (x1, y1), um den Startpunkt der Linie darstellen und (x2, y2) den Endpunkt der Linie.

• Das path Element nimmt einen Pfad (d) und Wert kann wie folgt interpretiert werden:

  • M5,20 - bis zu dem Punkt bewegen, die nach unten auf der rechten Seite des Behälters und 20px 5px ist.
  • L95,20 - Zeichnen Sie eine Linie vom vorherigen Punkt (5,20) bis (95,20).
  • L50,45 - Zeichnen Sie eine Linie vom vorherigen Punkt (95,20) bis (50,45).
  • z - Schließen Sie den Pfad. Das heißt, zeichne eine Linie, die den Punkt (50, 45) und den Startpunkt verbindet.

svg { 
 
    height: 100px; 
 
    width: 50px; 
 
} 
 
line, 
 
path { 
 
    stroke: #e74c3c; 
 
    stroke-width: 2; 
 
} 
 
path { 
 
    fill: none; 
 
    stroke-linejoin: bevel; 
 
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <g id='graphic'> 
 
    <line x1='5' y1='5' x2='95' y2='5' /> 
 
    <line x1='5' y1='10' x2='95' y2='10' /> 
 
    <line x1='5' y1='15' x2='95' y2='15' /> 
 
    <path d='M5,20 L95,20 L50,45z' /> 
 
    </g> 
 
</svg>

---

mit einzelnen Element Mit CSS:

Sie können die gleiche Form mit einem einzigen Element erreichen auch mit CSS. Unten ist ein Beispielausschnitt für dasselbe. Im Folgenden wird erläutert, wie die Form erreicht wird.

• Das übergeordnete Anker-Tag, das die Höhe und Breite des Containers hat.
• Das :before Pseudo-Element, das absolut in Bezug auf den Container positioniert ist und 20px groß ist. Der Hintergrund dieses Elements ist ein linearer Gradient, der für 2px die erforderliche Farbe hat und für den restlichen Teil transparent ist. Farbverläufe werden standardmäßig wiederholt, um den Inhalt des Containers zu füllen. Daher erzeugt dieses einzelne Hintergrundmuster die drei Linien.
• Das :after Element ist wieder absolut in Bezug auf den Container positioniert. Dieses Pseudoelement wird dann so gedreht, dass seine linken und unteren Ränder abgewinkelte Teile des Dreiecks erzeugen. Ein weiterer Hintergrund mit linearem Gradienten erzeugt die obere Linie des Dreiecks.
• Ich habe Höhe und Breite der :after Pseudo mit Pythagoras Theorem berechnet. Wenn der Container kein Quadrat ist, müssen Sie die Werte manuell berechnen.

a { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
a:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 3px; 
 
    left: 0px; 
 
    height: 20px; 
 
    width: 100%; 
 
    background: linear-gradient(to bottom, #e74c3c 2px, transparent 2px); 
 
    background-size: 100% 5px; 
 
} 
 
a:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: calc(50px/1.414); 
 
    width: calc(50px/1.414); 
 
    border-bottom: 2px solid #e74c3c; 
 
    border-left: 2px solid #e74c3c; 
 
    transform: translateX(-50%) translateY(-50%) rotate(-45deg); 
 
    background: linear-gradient(to top right, transparent 46%, #e74c3c 46%, #e74c3c 50%, transparent 50%); 
 
}

<a href='#'></a>