六角形用CSS悬停在Square上

Question

我最近看到[这个码本] [1]，其中八角形（错误地称为六边形）在悬停时变成了一个正方形。

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

我怎样才能做到这一点？

非常感谢！

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

Answer 1

用这个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，因为op

Answer 2

要创建Hexagon，可以使用两个伪元素宽度边框创建它。

然后你可以根据自己的喜好设置动画（我已经包含了一个仅用于文体目的的旋转）。

.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>

---

更加计算的结果/方法是使用：

.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>

---

支持图像的方法。

您可以使用伪元素上的边框来“掩盖”角落。下面是一种允许背景图像的方法：

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>

Answer 3

只需将气泡类的高度和宽度更改为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 4

您可以使用clip-path来实现此目的。请注意，遗憾的是，这个属性目前仅由Webkit＆amp;使用-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>