我想完全像上面的图片。六边形,有弯曲的边缘,也有边框。我试图给它边界半径,但它在某些部分不起作用。到目前为止我所做的代码我也分享了。
.menu-container {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
.hex-wrapper {
display: inline-block;
}
.hexagon {
background-color: #ccc;
background-position: center center;
border: 3px solid red;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
float: left;
font-family: sans-serif;
font-size: 2em;
font-weight: bold;
height: 110px;
letter-spacing: 6px;
line-height: 110px;
margin: 30px 3px;
position: relative;
text-align: center;
transition: color 500ms ease 0s, text-shadow 500ms ease 0s, background-color 500ms ease 0s, -webkit-transform 1s ease-in-out 0s;
width: 190px;
z-index: 1;
border-radius: 10px;
}
.hexagon .face1,
.hexagon .face2 {
backface-visibility: hidden;
background: inherit;
border-left: 3px solid red;
border-right: 3px solid red;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 184px;
z-index: -1;
}
.hexagon .face1:before,
.hexagon .face2:before {
content: '';
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon .face1 { transform: rotate(60deg); }
.hexagon .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon .face2 { transform: rotate(-60deg); }
.hexagon .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
<div class="menu-container">
<div class="hex-wrapper">
<div class="hexagon" id="nav-home">
Home
<div class="face1"></div>
<div class="face2"></div>
</div>
</div>
</div>