Heim > Artikel > Web-Frontend > Wie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele)

Wie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele)

青灯夜游Original: 2018-09-11 17:03:344726Durchsuche

In diesem Kapitel erfahren Sie, wie Sie mit CSS ein regelmäßiges Sechseck zeichnen. Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Zuvor müssen Sie die Beziehung zwischen den Innenwinkeln und Seiten eines regelmäßigen Sechsecks verstehen. Jeder Innenwinkel eines regelmäßigen Sechsecks beträgt 60 Grad, wie im Bild gezeigt (√3 ist eigentlich das Wurzelzeichen 3). :

Wie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele)

Methode 1: Das Prinzip besteht darin, das regelmäßige Sechseck in drei Teile zu teilen. Der linke, der mittlere und der rechte Teil sind: Vorheriger Teil, div. Teil und Nachher Teil, wie im Bild gezeigt:

Wie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele)

Der Teil vor dem Dreieck ist das Vor-Pseudoelement des Div, und der Teil nach dem Dreieck ist das Nach-Pseudoelement. Element der div.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用css画正六边形</title>
		<style type="text/css">
			.div {
                position: relative;
                width: 50px;
                height: 86.6px;
                margin: 50px auto;
                background-color: red;
            }
            .div:before {
                content: &#39;&#39;;
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                right:50px;
                border-width: 43.3px 25px;
                border-style: solid;
                border-color: transparent red transparent transparent;
            }
            .div:after {
                content: &#39;&#39;;
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                left:50px;
                border-width: 43.3px 25px;
                border-style: solid;
                border-color: transparent transparent transparent red;
                top:0;
            }
		</style>
	</head>

	<body>
		<div class=&#39;div&#39;></div>
	</body>

</html>

Rendering:

Wie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele)

Beachten Sie, dass die Breite und Höhe von Div- und Pseudoelementen gemäß der obigen Formel berechnet werden müssen.

Methode 2: Teilen Sie das regelmäßige Sechseck in drei Divs mit der gleichen Breite und Höhe und verwenden Sie dann Positionierung und CSS3 transform:rotate, um 60 Grad nach links und rechts zu drehen, um ein regelmäßiges Sechseck zu bilden, wie in gezeigt die Figur:

Wie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用css画正六边形</title>
		<style type="text/css">
			.one {
                width: 50px;
                height: 86.6px;
                margin: 0 auto;
                border-top: 1px solid red;
                border-bottom: 1px solid red;
            }
            .two {
                position: absolute;
                width: 50px;
                height: 86.6px;
                left: 25px;
                top: 0;
                transform: translate(-50%,-50%);
                transform: rotate(60deg);
                border-top: 1px solid red;
                border-bottom: 1px solid red;
            }
            .three {
                position: absolute;
                width: 50px;
                height: 86.6px;
                left: 25px;
                top: 0;
                transform: translate(-50%,-50%);
                transform: rotate(300deg);
                border-top: 1px solid red;
                border-bottom: 1px solid red;
            }
		</style>
	</head>

	<body>
		<div style=&#39;position:relative;width:100px;margin:0 auto;&#39;>
		    <div class=&#39;one&#39;></div>
		    <div class=&#39;two&#39;></div>
		    <div class=&#39;three&#39;></div>
		</div>
	</body>

</html>

Rendering:

Wie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele)

Das obige ist der detaillierte Inhalt vonWie zeichne ich mit CSS ein regelmäßiges Sechseck? Zwei Möglichkeiten, regelmäßige Sechsecke mit CSS zu zeichnen (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 伪元素 transform

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Besprechen Sie Probleme mit der Browserkompatibilität und sprechen Sie über häufige CSS-Fehler (Zusammenfassung)Nächster Artikel：Besprechen Sie Probleme mit der Browserkompatibilität und sprechen Sie über häufige CSS-Fehler (Zusammenfassung)

In Verbindung stehende Artikel

Mehr sehen