Ich versuche, ein Hexagon-Widget zu erstellen. Das sollte in etwa so aussehen:HTML-Hexagon mit innerem Text
(Bitte ignorieren Sie die Linien)
Und auf mobilen etwas wie folgt aus:
nun das Sechseck es selbst recht sein sollte Es gibt eine Menge online Dokumentation, wie man sie erstellt. Allerdings gibt es sehr wenig Informationen darüber, wie man Text so hinzufügt.
Normalerweise sind die Sechsecke aus ein paar Elementen gedreht und gedreht, um die Form zu erstellen.
Dies ist nicht sehr gut für meine Bedürfnisse, weil der Text dann nicht gerendert werden würde (oder unter einem anderen div sein).
die folgende CSS:
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #ffffff;
margin: 57.74px 0;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 141.42px;
height: 141.42px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 27.2893px;
}
.hexagon:before {
top: -70.7107px;
border-top: solid 2.8284px #000000;
border-right: solid 2.8284px #000000;
}
.hexagon:after {
bottom: -70.7107px;
border-bottom: solid 2.8284px #000000;
border-left: solid 2.8284px #000000;
}
ich die grundlegende Sechseck erstellt haben:
Hier ist eine Geige: https://jsfiddle.net/c5dk9Lay/1/
Hat jemand von euch haben keine Erfahrung in Erstellen Sie ein solches Widget oder wissen von einer Arbeit, so dass der Text
angezeigt werden kann
Schauen Sie sich diese codepen https://codepen.io/darsain/pen/Cxawq – Syfer