2017-04-19 6 views
2

Ich versuche, ein Hexagon-Widget zu erstellen. Das sollte in etwa so aussehen:HTML-Hexagon mit innerem Text

enter image description here

(Bitte ignorieren Sie die Linien)

Und auf mobilen etwas wie folgt aus:

enter image description here

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:

enter image description here

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
+0

Schauen Sie sich diese codepen https://codepen.io/darsain/pen/Cxawq – Syfer

Antwort

2

Überprüfen Sie diese Geige. Here

HTML: <div class="hexagon"> <div class="text"> <h1>89%</h1> <p>My Overall Score</p> </div> </div>

hinzufügen CSS:

.text{ 
    position: absolute; 
z-index: 1000; 
width: 100%; 
text-align: center; 

}

+0

Hey danke das funktioniert hast du eine ahnung wie ich die mobile version erreichen könnte? –

+0

Überprüfen Sie diese Geige für die Aktualisierung. https://jsfiddle.net/n2uvw73z/1/. Verwenden Sie einfach die Medienabfrage css für die mobile Version. Größe des Ergebnisfensters unter 500px, um den Effekt zu sehen –

Verwandte Themen