Menu hex perfeito para inicio de site ou menus bem elaborados
Menu Hex colorido:
<div class='hex'>
<div style='position: absolute; margin-top: -10px;'>
<div class='hexagon-wrapper' id='hex1'>
<div class='hexagon' id='color1'/></div></div>
<div style='position: absolute; margin-top: 210px; margin-left:;'>
<div class='hexagon-wrapper' id='hex2'>
<div class='hexagon' id='color2'/></div></div>
<div style='position: absolute; margin-top: 100px; margin-left:190px;'>
<div class='hexagon-wrapper' id='hex3'>
<div class='hexagon' id='color3'/></div></div>
<div style='position: absolute; margin-top: -120px; margin-left:190px;'>
<div class='hexagon-wrapper' id='hex1'>
<div class='hexagon' id='color4'/></div></div>
<div style='position: absolute; margin-top: -10px; margin-left:381px;'>
<div class='hexagon-wrapper' id='hex1'>
<div class='hexagon' id='color5'/></div></div>
</div>
<script src='//cdn.jsdelivr.net/prefixfree/1.0.7/prefixfree.min.js'/>
</div>
/* Formas
------------------------ */
#hex1 {
width: 220px;
height: 220px;
}
#hex2 {
width: 220px;
height: 220px;
}
#hex3 {
width: 220px;
height: 220px;
}
#color1 {
background-color: #39D;
}
#color2 {
background-color: #93D;
}
#color3 {
background-color: #D93;
}
#color4 {
background-color: #FFD700;
}
#color5 {
background-color: #DA70D6;
}
#color6 {
background-color: #DA70D6;
}
.hexagon-wrapper {
text-align: center;
margin: 20px;
position: relative;
display: inline-block;
}
.hexagon {
height: 100%;
width: calc(100% * 0.57735);
display: inline-block;
}
.hexagon:before {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotateZ(60deg);
}
.hexagon:after {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotateZ(-60deg);
}
.hex {
background:#ccc;
margin-left:300px;
width: 700px;
height: 520px;
}
.hexa1 {
background:#fff;
width: 240px;
height: 260px;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-moz-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-ms-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-o-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
Menu de imagem Hex:
<div class='barrap'>
<div class='autoravatar'><img alt='Andréa Alark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RnXvYEEPbDMdNa0BfiElv98AqFp20yOZny1orCw22tycORN1U-66W4jAFVCscmhf5ObHjXHZhy8BscZVTF6YXGcWoCcOc0ByN23G0IkqjvINewg849kUA3kM733DbU1vbMlx52MD4YRJ/s320/cover.jpg'/></div>
<div class='autotexto'> </div>
/* Barra do perfil
------------------------ */
.barrap {
background:#fff;c
margin-left:-7px;
width: 420px;
height: 600px;
}
/* Icone
------------------------ */
.autoravatar img {
object-fit:cover;
height: 153px;
width: 145px;
filter: invert(8%);
margin-left:125px;
margin-top: 60px;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-moz-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-ms-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-o-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
fffff
Nenhum comentário:
Postar um comentário