Frage Erzeuge wiederholendes hexagonales Muster mit CSS3


Also muss ich ein wiederholendes sechseckiges Muster mit CSS erstellen. Wenn Bilder benötigt werden, kann ich dorthin gehen, aber ich würde es vorziehen, CSS wenn möglich zu verwenden.

Hier ist eine Idee von dem, was ich versuche zu erstellen:

enter image description here

Im Grunde brauche ich nur eine Möglichkeit, um die hexagonalen Formen zu erstellen, und dann überlagern Sie Text / Bilder auf ihnen. Ich habe noch nicht viel Code, weil ich nicht wirklich sicher bin, wo ich anfangen soll. Das Problem ist, ich könnte es einfach benutzen <div>s in der Form eines Sechsecks wie in (http://css-tricks.com/examples/ShapesOfCSS/), aber dann würden sie nicht verbinden. Ich könnte ein sich wiederholendes Sechseckmuster verwenden, aber dann wäre ich nicht in der Lage, den genauen Ort des Textes oder der Bilder anzugeben, die ich in bestimmten Formen brauche. Danke für jede Hilfe im Voraus.


75
2018-04-08 12:45


Ursprung


Antworten:


(Obwohl die Antwort von Ana Monate nach meiner kam, wahrscheinlich meine als eine Basis zu verwenden, um "von zu denken", die Tatsache, dass sie in der Lage war, eine Methode mit einer einzigen zu finden div lohnt sich zu fördern, also Schau dir auch ihre Antwort an- Beachten Sie jedoch, dass der Inhalt im Hex eingeschränkt ist.)

Das war eine wirklich erstaunliche Frage. Danke, dass du es fragst. Das Tolle ist, dass:

Dieses Geige beweist, dass Sie es tun können!

Original Geige benutzt (modifiziert im späteren Schnitt zu Geige Link oben) - es verwendet imgur.com Bilder, die nicht sehr zuverlässig im Laden zu sein schienen, so dass die neue Geige photobucket.com (lassen Sie mich wissen, wenn es anhaltende Probleme beim Laden von Bildern gibt). Ich habe den ursprünglichen Link beibehalten, weil der folgende Erklärungscode dazu passt (es gibt einige Unterschiede in background-size oder position zur neuen Geige).

Die Idee kam mir fast sofort nachdem ich Ihre Frage gelesen hatte, aber ich brauchte einige Zeit um sie zu implementieren. Ich habe ursprünglich versucht, ein einzelnes "Hex" mit einem einzigen zu bekommen div und nur Pseudo - Elemente, aber so gut ich das beurteilen konnte, gab es keine Möglichkeit, einfach die background-image (was ich brauchte), also musste ich etwas extra hinzufügen div Elemente, um die rechte / linke Seite des Hex zu bekommen, so dass ich dann die Pseudoelemente als Mittel verwenden könnte background-image Drehung.

Ich habe IE9, FF und Chrome getestet. Theoretisch jeder Browser, der CSS3 unterstützt transform es sollte funktionieren.

Erstes Main Update (zusätzliche Erklärung)

Ich habe jetzt etwas Zeit, um einige Code-Erklärungen zu veröffentlichen, also hier:

Zunächst werden Sechsecke durch 30/60-Grad-Beziehungen und Trigonometrie definiert, so dass diese die wichtigsten beteiligten Winkel sind. Zweitens beginnen wir mit einer "Zeile", in der sich das Hexadezimalraster befindet. Der HTML-Code ist definiert als (der zusätzliche div Elemente helfen, das Hex zu bauen):

<div class="hexrow">
    <div>
        <span>First Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Second Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Third Hex Text</span>
        <div></div>
        <div></div>
    </div>
</div>

Wir werden verwenden inline-block für das Sechseck display, aber wir wollen nicht, dass sie versehentlich in die nächste Zeile springen und das Raster ruinieren white-space: nowrap löst dieses Problem. Das margin In dieser Zeile hängt davon ab, wie viel Platz zwischen den Hexfeldern ist, und einige Experimente sind möglicherweise erforderlich, um zu erhalten, was Sie wollen.

.hexrow {
    white-space: nowrap;
    /*right/left margin set at (( width of child div x sin(30) ) / 2) 
    makes a fairly tight fit; 
    a 3px bottom seems to match*/
    margin: 0 25px 3px;
}

Mit den unmittelbaren Kindern der .hexrowwelche sind gerade div Elemente bilden wir die Basis für die Hex-Form. Das width wird die Horizontale der Oberseite des Sechsecks antreiben, die height ergibt sich aus dieser Zahl, da alle Seiten auf einem regelmäßigen Sechseck gleich lang sind. Auch hier wird der Abstand vom Abstand abhängen, aber hier wird die "Überlappung" der einzelnen Sechsecke auftreten, um das Gitter aussehen zu lassen. Das background-image ist einmal definiert, genau hier. Die Verschiebung, die darauf verbleibt, ist, mindestens die addierte Breite für die linke Seite des Sechsecks aufzunehmen. Angenommen, Sie möchten zentrierten Text, der text-align behandelt die horizontale (natürlich) aber die line-height das entspricht dem height wird eine vertikale Zentrierung ermöglichen.

.hexrow > div {
    width: 100px;
    height: 173.2px; /* ( width x cos(30) ) x 2 */
    /* For margin:
    right/left = ( width x sin(30) ) makes no overlap
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
    margin: 0 25px;
    position: relative;
    background-image: url(http://i.imgur.com/w5tV4.jpg);
    background-position: -50px 0; /* -left position -1 x width x sin(30) */
    background-repeat: no-repeat;
    color: #ffffff;
    text-align: center;
    line-height: 173.2px; /*equals height*/
    display: inline-block;
}

Jeder ungerade Zahlenhex werden wir in Bezug auf die "Reihe" und jede nach unten verschieben sogar Hochschalten. Die Verschiebungsberechnung (Breite x cos (30) / 2) ist auch die gleiche wie (Höhe / 4).

.hexrow > div:nth-child(odd) {
    top: 43.3px; /* ( width x cos(30) / 2 ) */
}

.hexrow > div:nth-child(even) {
    top: -44.8px; /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}

Wir benutzen 2 Kinder div Elemente zum Erstellen der "Flügel" des Hex. Sie haben die gleiche Größe wie das Haupthexrechteck, werden dann gedreht und "unter" das Haupthex gedrückt. Background-image wird vererbt, so dass das Bild (natürlich) dasselbe ist, weil das Bild in den "Flügeln" mit dem im Hauptrechteck "aufgereiht" wird. Die Pseudo-Elemente werden verwendet, um die Bilder zu erzeugen, weil sie wieder in die horizontale Richtung "gedreht" werden müssen (seit wir den Elternteil gedreht haben) div von ihnen, um die "Flügel" zu schaffen.

Das :before der erste übersetzt seinen Hintergrund die Breite des negativen Betrags gleich dem Hauptteil des Sechsecks plus die ursprüngliche Hintergrundverschiebung des Haupthex. Das :before der zweite wird den Ursprungspunkt der Übersetzung ändern und wird die Hauptbreite auf der X-Achse und die Hälfte der Höhe auf der Y-Achse verschieben.

.hexrow > div > div:first-of-type {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(60deg); /* IE 9 */
    -moz-transform:rotate(60deg); /* Firefox */
    -webkit-transform:rotate(60deg); /* Safari and Chrome */
    -o-transform:rotate(60deg); /* Opera */
    transform:rotate(60deg);
}

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: top left;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    z-index: 1;

    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
    transform:rotate(-60deg) translate(-150px, 0);

    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform-origin: 0 0; /* Opera */
    transform-origin: 0 0;
}

.hexrow > div > div:last-of-type {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(-60deg); /* IE 9 */
    -moz-transform:rotate(-60deg); /* Firefox */
    -webkit-transform:rotate(-60deg); /* Safari and Chrome */
    -o-transform:rotate(-60deg); /* Opera */
    transform:rotate(-60deg);
}

.hexrow > div > div:last-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* starting width + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: top left;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    z-index: 1;

    /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
    -ms-transform:rotate(60deg) translate(100px, 86.6px); /* IE 9 */
    -moz-transform:rotate(60deg) translate(100px, 86.6px); /* Firefox */
    -webkit-transform:rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */
    -o-transform:rotate(60deg) translate(100px, 86.6px); /* Opera */
    transform:rotate(60deg) translate(100px, 86.6px);

    -ms-transform-origin: 100% 0; /* IE 9 */
    -webkit-transform-origin: 100% 0; /* Safari and Chrome */
    -moz-transform-origin: 100% 0; /* Firefox */
    -o-transform-origin: 100% 0; /* Opera */
    transform-origin: 100% 0;
}

Dies span bringt deinen Text unter. Das line-height wird zurückgesetzt, um die Textzeilen normal zu machen, aber die vertical-align: middle arbeitet seit dem line-height war größer auf dem Elternteil. Das white-space ist zurückgesetzt, so dass es wieder einpacken ermöglicht. Der linke / rechte Rand kann auf negativ gesetzt werden, damit der Text in die "Flügel" des Sechsecks gehen kann.

.hexrow > div > span {
    display: inline-block;
    margin: 0 -30px;
    line-height: 1.1;
    vertical-align: middle;
    white-space: normal;
}

Sie können einzelne Zielzeilen und Zellen in diesen Zeilen ändern, um Bilder zu ändern span Texteinstellungen oder Opazität, oder ein größeres Bild (um es an den gewünschten Ort zu verschieben), etc. Das ist, was die folgenden für die zweite Zeile tun.

.hexrow:nth-child(2) > div:nth-child(1) {
    background-image: url(http://i.imgur.com/7Un8Y.jpg);
}

.hexrow:nth-child(2) > div:nth-child(1) > span {
    /*change some other settings*/
    margin: 0 -20px;
    color: black;
    font-size: .8em;
    font-weight: bold;
}

.hexrow:nth-child(2) > div:nth-child(2) {
    background-image: url(http://i.imgur.com/jeSPg.jpg);
}

.hexrow:nth-child(2) > div:nth-child(3) {
    background-image: url(http://i.imgur.com/Jwmxm.jpg);
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -150px -120px;
    opacity: .3;
    color: black;
}

.hexrow:nth-child(2) > div:nth-child(3) > div:before {
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -100px -120px; /* the left shift is always less in the pseudo elements by the amount of the base shift */
}

.hexrow:nth-child(2) > div:nth-child(4) {
    background-image: url(http://i.imgur.com/90EkV.jpg);
    background-position: -350px -120px;
}

.hexrow:nth-child(2) > div:nth-child(4) > div:before {
    background-position: -300px -120px;
}

128
2018-04-09 02:41



Es kann tatsächlich mit nur einem Element pro Sechseck und Pseudo-Elementen für das Hintergrundbild und den Text gemacht werden.

Demo

Basic HTML Struktur:

<div class='row'>
    <div class='hexagon'></div>
</div>
<div class='row'>
    <div class='hexagon content ribbon' data-content='This is a test!!! 
    9/10'></div><!--
    --><div class='hexagon content longtext' data-content='Some longer text here.
       Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>

Sie können möglicherweise mehr Zeilen haben, müssen Sie nur haben n Sechsecke auf ungeraden Reihen und n+/-1 Sechsecke auf geraden Reihen.

Relevant CSS:

* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.5% 0; text-align: center; }
.row:first-child { margin-top: 7%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 8.5%;
    padding: 16%;
    transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before, .content:after {
    display: block;
    position: absolute;
    /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleX(1.155) /* 1.155 = 2/sqrt(3) */ 
               skewY(-30deg) rotate(-30deg);
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.content:after { content: attr(data-content); }
/* add background images to :before pseudo-elements */
.row:nth-child(n) .hexagon:nth-child(m):before {
    background-image: 
        url(background-image-mxn.jpg); 
}

51
2017-10-25 13:05



Ich werde eine einfache Demo zur Erstellung einer sechseckigen Form bereitstellen.

.hex {
  width: 40px;
  height: 70px;
  margin: 20px;
  overflow: hidden;
}

.hex:before {
  content: "";
  transform: rotate(45deg);
  background: #f00;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px -5px 10px -5px;
}
<div class="hex">
</div>


2
2018-04-09 03:24



Hier ist ein weiterer Ansatz mit COMPASS / SCSS, mit dem die Größe und das Layout der Sechsecke einfach festgelegt werden können:

http://codepen.io/interdruper/pen/GrBEk


1
2018-05-03 10:59



Wenn Sie in der Lage sind, den Div-Shapes-Trick zu implementieren, geben Sie einfach jedem Div ein position:relative(Sie müssten sie zuerst alle nacheinander positionieren, indem Sie auch einstellen top und left)


0
2018-04-08 13:00



Sie können ein vollständig reagierendes hexagonales Raster nur mit CSS erstellen. Die Idee ist, mit CSS2.1 overflow: hidden eine übergeordnete Form als Maske zu erstellen, die mit fast allen Browsern kompatibel ist, sogar Internet Explorer 6.

Es ist eine überraschend einfache Technik, die verwendet werden kann, um ein reaktionsfähiges Gitter aus allen Arten von Formen zu erzeugen, es erfordert nur, außerhalb des Kastens zu denken, um das Problem zu lösen.

Ich habe eine ausführliche Schritt für Schritt Anleitung, wie man diese Technik hier macht: https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids

Dies ist der beste Weg, den ich bisher gefunden habe, benötigt kein Javascript und ist sowohl flüssig als auch reaktionsschnell.

Ich habe die Technik auch in einer kostenlosen HTML-Vorlage verwendet, die Bilder in den Sechsecken enthält, die Sie hier vorführen und herunterladen können: https://www.codesmite.com/freebie/hexa-free-responsive-portfolio-template


0
2018-01-21 06:54



AFAIK, in reinem CSS gibt es keine Möglichkeit. Ihre beste Wette wäre, den Maskenausschnitt für Hintergründe zu verwenden, wie hier erklärt: http://www.cssbakery.com/2009/06/background-image.html (Dies funktioniert nur, wenn der Seitenhintergrund einfarbig ist oder Sie Ihre Maske anpassen und positionieren können, um sie dem Seitenhintergrund anzupassen.

Dann könnten Sie csstextwrap verwenden, um in den Text zu passen: http://www.csstextwrap.com/examples.php

Es gab eine Menge ähnlicher Fragen zu SO. Z.B. Jede Art, Text in div zu haben, füllt eine Dreiecksform?


-2
2018-04-08 19:46