Question

我正在帮助一个有网站的朋友，并且她有一个非常具体的按钮类型：

＆＃34;我希望这些按钮为六边形，中间有一张照片，并且在移动到投资组合页面之前实际上是点按了。＆＃34;

我设法创建了一个圆形方块，可以很容易地使用CSS和HTML，但是我无法计算出六边形。有人在这里提供一些帮助吗？

HTML：

<a href="#" class="button">
<span>
<p> Jorgie</p></span>
</a>

CSS：

.button {
display: inline-block;
margin: 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:    0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
box-shadow: 0 8px 0 #463E3F, 0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
-moz-transition: -moz-box-shadow .1s ease-in-out;
-o-transition: -o-box-shadow .1s ease-in-out;
transition: box-shadow .1s ease-in-out;
font-size: 20px;
color: #fff;
}

.button span {
display: inline-block;
background-color: black;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
font-family: 'Pacifico', Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
-webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-    out;
-moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
-o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}

.button:hover span {
background-image:url(jorgie.jpg);
background-repeat:no-repeat;
background-position:center;
text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);
}

.button:active, .button:focus {
-webkit-box-shadow:    0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
box-shadow:    0 8px 0 #463E3F, 0 12px 10px rgba(0, 0, 0, .3);
}

.button:active span {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
transform: translate(0, 4px);
}

Answer 1

这是一个六角形按钮，改编自此问题中描述的解决方案：Button with pointed edges and shadow：

六边形是用偏斜的伪元素制作的，阴影是用阴影制作的，点击事件的过渡是用CSS制作的：

<强> DEMO

HTML：

<div class="button top">
    <div class="button bottom"></div>
</div>

CSS：

.top{
    position:relative;
    top:0;
    margin-left:150px;
    width: 45px;
    height: 60px;

    -webkit-transition: top .1s;
    -ms-transition: top .1s;
    transition: top .1s;
}
.button:before, .button:after{
    position: absolute;
    width:70%; height:50%;    
    content: "";  
    z-index:-1;
}
.top:before {
    left:0; top:0;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #469BF9;
    box-shadow: -5px 10px 0px -5px #104f96;
    z-index:-2;
}
.top:after {
    right:0; top:0;
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #469BF9;
    box-shadow: 5px 10px 0px -5px #104f96;
    z-index:-2;
}
.bottom:before{
    left:0; top:50%; transitions.
    -webkit-transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    transform:skewX(20deg);
    background: #1E80F7;
    box-shadow: -4px 5px 0px 0px #104f96;
}
.bottom:after{
    right:0; top:50%;
    -webkit-transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    transform:skewX(-20deg);
    background: #1E80F7;
    box-shadow: 4px 5px 0px 0px #104f96;
}

.button:after, .button:before{
    -webkit-transition: box-shadow .1s;
    -ms-transition: box-shadow .1s;
    transition: box-shadow .1s;
}
.top:active{
    top:5px;
}
.button:active:after, .button:active:before, .button:active .button:before, .button:active .button:after {
    box-shadow: 0px 0px 0px 0px #104f96;
}

Answer 2

据我所知，带有完整图像的六边形需要多个div，如下所示

JSfiddle Demo

<强> HMTL

<div class="hexagon">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
            <a href="#"></a>
        </div>
    </div>
</div>

<强> CSS

.hexagon {  
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
  width: 400px;
  height: 200px;
  margin: 25px;
  visibility: hidden;
  overflow: hidden;      
}

.hexagon-in1 {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
  overflow: hidden;  

}

.hexagon-in2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url(http://placekitten.com/241/241);
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hexagon-in2 a {
  display: block;
}

实际的“按下”效果可能会有点困难。

坦率地说，我想在这里使用一个实际的图像..而不是这个按钮的非语义'样式'div。

Answer 3

对于六边形按钮，这里有一个 FIDDLE

<div id="hexagon"></div>

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}

3D六角形按钮

3 个答案: