Dreiecke in einer Linie HTML / CSS-Webdesign

470
Ahkil Jackson

Ich entwerfe derzeit eine Website für eine Klasse und habe Schwierigkeiten, herauszufinden, wie man die Dreiecke aneinander reihen kann, um einen Diamanten zu bilden.

Vielen Dank für Ihre Hilfe.

Hier ist die Seite:

Web Page

Hier ist der CODE:

HTML code

CSS code pg1

CSS code pg2

CSS code pg3

-2
Hallo Ahkil, vielleicht möchten Sie den Code in eine [JSFiddle] (https://jsfiddle.net/) einfügen. mcalex vor 6 Jahren 0
Bitte fügen Sie Code, Fehler und Daten als ** Text ** ([mit Code-Formatierung] (/ Editing-Help-Code)) ein, nicht Bilder. Bilder: A) Erlauben Sie uns nicht, den Code / die Fehler / Daten zum Testen zu kopieren und einzufügen. B) Erlaube keine Suche anhand des Codes / Fehlers / Dateninhalts. und [viele weitere Gründe] (// meta.stackoverflow.com/a/285557). Im Allgemeinen sind Code / Fehler / Daten im Textformat >>>> Code / Fehler / Daten als Bild >> nichts. Bilder sollten nur * neben Text im Code-Format * verwendet werden, wenn durch das Bild etwas Wesentliches hinzugefügt wird, das nicht nur durch den Textcode / den Fehler / die Daten vermittelt wird. Makyen vor 5 Jahren 0

1 Antwort auf die Frage

0
ttaylor1218

Ich würde vorschlagen, dass Sie möglichst SVG-Elemente anstelle von HTML-Elementen verwenden. Wenn Sie HTML-Elemente verwenden müssen, können Sie Folgendes tun:

.diamond { position: relative; display:inline-block; width: 0; height: 0; border-style: solid; border-width: 50px 50px 50px 0; border-color: transparent #007bff transparent transparent; } .diamond:after { content:''; position: relative; display:inline-block; top:-50px; left:50px; width: 0; height: 0; border-style: solid; border-width: 50px 0 50px 50px; border-color: transparent transparent transparent #007bff; }

verwendet mit html:

<div class="diamond"></div>

Code Pen

Verwandte Probleme