Wie erstellt man ein Hexagon geformtes Menu mit HTML und CSS?

von | Jun 23, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - fff - HTML

Inhaltsverzeichnis

Im heutigen Video möchte ich euch zeigen wie ihr euch auch ein schönes Grid Menu erstellen könnt in der Form eines Hexagons. Hier lernt man nicht nur wie man eine Form mit einer Clip-Path Maske anpasst sondern es auch noch schön designt und animiert.

Video

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 <div class="container">
      <div class="hexagonbereich zeile1">
        <div class="hexagon">
          <img src="icon/haus.png" />
          <h3>Haus1</h3>
        </div>
        <div class="hexagon">
          <img src="icon/herz.png" />
          <h3>Herz</h3>
        </div>
        <div class="hexagon">
          <img src="icon/tel.png" />
          <h3>Tel</h3>
        </div>
        <div class="hexagon">
          <img src="icon/smiley.png" />
          <h3>Smiley</h3>
        </div>
      </div>
      <div class="hexagonbereich zeile2">
        <div class="hexagon">
          <img src="icon/hand.png" />
          <h3>Hand</h3>
        </div>
        <div class="hexagon">
          <img src="icon/auge.png" />
          <h3>Auge</h3>
        </div>
        <div class="hexagon">
          <img src="icon/auto.png" />
          <h3>Auto</h3>
        </div>
      </div>
    </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}
 
.container .hexagonbereich {
  display: flex;
}
 
img {
  width: 100px;
  height: auto;
}
 
h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 0.8rem;
}
 
.container .hexagonbereich .hexagon {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 10px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--dunkelblau);
 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 
  transition: 500ms;
}
 
.container .hexagonbereich.zeile2 {
  transform: translateY(-25px);
}
 
.container .hexagonbereich .hexagon:hover {
  background: var(--rot);
  transform: scale(0.9);
}

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert