使用 CSS 将六边形悬停到正方形

Question

我最近看到[this codepen][1]，当鼠标悬停在上面时，八边形（错误地称为六边形）会变成正方形。

我想这样做，但是 300px 大小的六边形变成正方形。

我怎样才能做到这一点？

非常感谢！

  [1]: http://codepen.io/EdwinToh/pen/ktaxH?editors=110

Answer 1

只需将气泡的高度和宽度 class 更改为 300px

 .bubble {

  width:300px;
  height:300px;
  position:relative;
  overflow:hidden;

  background:#000;

  -webkit-transition: .2s all ease-out;
  -moz-transition: .2s all ease-out;
  transition: .2s all ease-out;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

  cursor:pointer;
}

Answer 2

用这个 css:

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    margin:50px;
}
#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;
}
#hexagon:hover {
    width: 100px;
    height: 100px;
    top:-25px;
}
#hexagon:hover:after {display:none;}
#hexagon:hover:before {display:none;}

你可能有你想要的：FIDDLE

或者有点动画：FIDDLE

已编辑： 更新了两个小提琴，因此宽度为 300px，符合操作要求

Answer 3

您可以使用 clip-path 来实现这一点。请注意，不幸的是，此属性目前仅受 Webkit 和 Blink 浏览器支持，使用 -webkit- 前缀（See caniuse.com）。

More information on clip-path

示例

#hexagon{
    background:#000;
    -webkit-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%);
    height:300px;
    margin:20px auto;
    transition:all .5s;
    width:300px;
}
#hexagon:hover{
    -webkit-clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 100%,0 0);
    clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 100%,0 0);
}

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

Answer 4

要创建六边形，您可以使用两个伪元素宽度边框来创建它。

然后您可以根据自己的喜好对其进行动画处理（我包含了一个仅用于风格目的的旋转）。

.hex:before {
  content: " ";
  width: 0;
  height: 0;
  border-bottom: 75px solid tomato;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  position: absolute;
  transition: all 0.6s;
  top: -75px;
}
.hex {
  margin-top: 75px;
  width: 300px;
  height: 180px;
  background-color: tomato;
  position: relative;
  transition: all 0.6s;
}
.hex:after {
  content: "";
  width: 0;
  position: absolute;
  bottom: -75px;
  border-top: 75px solid tomato;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  transition: all 0.6s;
}
.hex:hover:before {
  top: 0;
}
.hex:hover:after {
  bottom: 0;
}
.hex:hover {
  margin-top: 0;
  height: 300px;
  transform-origin:center center;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

<div class="hex">
  <div>

更计算的 result/approach 将使用：

.hexagon {
  position: relative;
  width: 300px;
  height: 173.21px;
  background-color: tomato;
  margin: 86.60px 0;
  transition:all 0.6s;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  transition:all 0.6s;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 86.60px solid tomato;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid tomato;
}
.hexagon:hover:before,
.hexagon:hover:after {
  border-color: transparent;
}
.hexagon:hover{
  margin:0;
  height:300px;
  }

<div class="hexagon"></div>

图像支持的方法。

您可以在伪元素上使用边框之类的东西 'cover up' 角。下面是一种允许使用背景图片的方法：

div {
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
  position: relative;
  margin: 100px auto;
}
div:before {
  content: "";
  position: absolute;
  width: 0;
  border-top: 150px solid white;
  border-left: 300px solid transparent;
  border-bottom: 150px solid white;
  top: -50px;
  height: 100px;
  right: -50px;
  transition: all 0.6s;
}
div:after {
  content: "";
  position: absolute;
  width: 0;
  height: 100px;
  border-top: 150px solid white;
  border-right: 300px solid transparent;
  border-bottom: 150px solid white;
  top: -50px;
  left: -50px;
  transition: all 0.6s;
}
div:hover:before,
div:hover:after {
  border-color: transparent;
}

<div></div>

使用 CSS 将六边形悬停到正方形

Hexagon hover to Square with CSS

css

shape

hover

css-shapes

图像支持的方法。