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

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

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

我怎样才能做到这一点

非常感谢

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

---

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

---

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

使用此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;}

你可以得到你想要的：

或者有点生动活泼：

编辑：更新了两个小提琴，使其宽度为300px，如使用此css的op所要求的那样：

#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;}

你可以得到你想要的：

或者有点生动活泼：

---

编辑：更新了两个小提琴，使其宽度为300px，如op所要求的那样

您可以使用

剪辑路径

来实现这一点。请注意，不幸的是，当前只有Webkit&Blink浏览器使用

-Webkit-

前缀（）支持此属性

示例

#hexagon{
背景：#000；
-webkit剪辑路径：多边形（50%0100%25%，100%75%，50%100%，075%，025%）；
剪辑路径：多边形（50%0100%25%，100%75%，50%100%，075%，025%）；
高度：300px；
保证金：20px自动；
过渡：全部5秒；
宽度：300px；
}
#六边形：悬停{
-webkit剪辑路径：多边形（50%0100%0100%100%，50%100%，01100%，0）；
剪辑路径：多边形（50%0100%0100%100%，50%100%，01100%，0）；
}

---

您可以使用

剪辑路径来实现这一点。请注意，不幸的是，当前只有Webkit&Blink浏览器使用
-Webkit-
前缀（）支持此属性


示例
#hexagon{
背景：#000；
-webkit剪辑路径：多边形（50%0100%25%，100%75%，50%100%，075%，025%）；
剪辑路径：多边形（50%0100%25%，100%75%，50%100%，075%，025%）；
高度：300px；
保证金：20px自动；
过渡：全部5秒；
宽度：300px；
}
#六边形：悬停{
-webkit剪辑路径：多边形（50%0100%0100%100%，50%100%，01100%，0）；
剪辑路径：多边形（50%0100%0100%100%，50%100%，01100%，0）；
}
要创建六边形，可以使用两个伪元素宽度边框创建六边形

然后，您可以根据自己的喜好设置动画（我已经包含了一个仅用于风格目的的旋转）


.hex:之前{
内容：“；
宽度：0；
身高：0；
边框底部：75px实心番茄；
左边框：150px实心透明；
右边框：150px实心透明；
位置：绝对位置；
过渡：均为0.6s；
顶部：-75px；
}
海克斯先生{
边缘顶部：75px；
宽度：300px；
高度：180像素；
背景色：番茄；
位置：相对位置；
过渡：均为0.6s；
}
.海克斯：之后{
内容：“；
宽度：0；
位置：绝对位置；
底部：-75px；
边框顶部：75px实心番茄；
左边框：150px实心透明；
右边框：150px实心透明；
过渡：均为0.6s；
}
.hex:悬停：在{
排名：0；
}
.hex:悬停：之后{
底部：0；
}
.六角：悬停{
边际上限：0；
高度：300px；
变换原点：中心；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
变换：旋转（90度）；
}
要创建六边形，可以使用两个伪元素宽度边框创建六边形

然后，您可以根据自己的喜好设置动画（我已经包含了一个仅用于风格目的的旋转）


.hex:之前{
内容：“；
宽度：0；
身高：0；
边框底部：75px实心番茄；
左边框：150px实心透明；
右边框：150px实心透明；
位置：绝对位置；
过渡：均为0.6s；
顶部：-75px；
}
海克斯先生{
边缘顶部：75px；
宽度：300px；
高度：180像素；
背景色：番茄；
位置：相对位置；
过渡：均为0.6s；
}
.海克斯：之后{
内容：“；
宽度：0；
位置：绝对位置；
底部：-75px；
边框顶部：75px实心番茄；
左边框：150px实心透明；
右边框：150px实心透明；
过渡：均为0.6s；
}
.hex:悬停：在{
排名：0；
}
.hex:悬停：之后{
底部：0；
}
.六角：悬停{
边际上限：0；
高度：300px；
变换原点：中心；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
变换：旋转（90度）；
}

你误读了这个问题（事实上我也误读了）…他不想要一个八角形…他想要一个六边形…即使他没有为一个提供代码。你误读了这个问题（事实上我也是）…他不想要一个八角形…他想要一个六边形…即使他没有为一个提供代码。@jbutler483你误读了这个问题。@jbutler483（事实上我也是）…他不想要八角形…他想要六边形…即使他没有提供一个的代码。@Paulie\u D:ty让我知道。：）#你可以看看这个：当你点击它时，它会变成一个正方形。它使用svg将形状从六边形更改为正方形。@jbutler483您误读了问题（事实上我也误读了）…他不想要八角形…他想要六边形…尽管他没有提供六边形的代码。@Paulie\u D:ty让我知道。：）#你可以看看这个：当你点击它时，它会变成一个正方形。它使用svg将形状从六边形更改为正方形。因此，基本上你的答案与我的相同？阿尔瓦罗：没有。首先，我的代码片段比例正确，并且包含了如何生成的想法。我目前也在编辑，以包括背景图像的方法，虽然我的互联网死了，所以我不得不写在电话上，如果你必须知道的话。我很好。我想所有人都有不同的观点，一句10个单词的句子解释的不仅仅是一把小提琴。愚蠢的我，我习惯于出于尊重删除我的答案，当我在同一时间写作时（这里不适用案例），并且在发布后，我发现有人更快地发布了答案。猜一点语义会让答案完全不同