Html 如何创建切出的六边形形状？

如何使用CSS创建切出的六边形形状

我所说的切出六边形是指这样的形状：

我能够创建一个六边形的背景图像，但我需要它像在图像中

.hexagon{
位置：相对位置；
宽度：300px；
高度：173.21px；
利润率：86.60px0；
背景图像：url（'https://placeimg.com/300/400/any');
背景尺寸：自动346.4102px；
背景位置：中心；
}
hexTop先生，
hexBottom先生{
位置：绝对位置；
z指数：1；
宽度：212.13px；
高度：212.13px；
溢出：隐藏；
-webkit变换：scaleY（0.5774）旋转（-45度）；
-ms变换：scaleY（0.5774）旋转（-45度）；
变换：scaleY（0.5774）旋转（-45度）；
背景：继承；
左：43.93px；
}
/*反向变换caps上的背景图像*/
.hexTop:之后，
.hexBottom:之后{
内容：“；
位置：绝对位置；
宽度：300.0000px；
高度：173.2050807568775px；
-webkit变换：旋转（45度）缩放（1.7321）平移（-86.6025px）；
-ms变换：旋转（45度）缩放（1.7321）平移（-86.6025px）；
变换：旋转（45度）缩放（1.7321）平移（-86.6025px）；
-webkit转换原点：0；
-ms变换原点：0；
变换原点：0；
背景：继承；
}
hexTop先生{
顶部：-106.0660px；
}
.hexTop:之后{
背景位置：中上；
}
hexBottom先生{
底部：-106.0660px；
}
.hexBottom:之后{
背景位置：中底；
}
.六边形：之后{
内容：“；
位置：绝对位置；
顶部：0.0000px；
左：0；
宽度：300.0000px；
高度：173.2051px；
z指数：2；
背景：继承；
}

---

这种形状可以通过使用元件填充六边形的外部来实现。不同的

transform:rotate（xdeg）

应应用于每个元素以实现此效果

下面是创建此效果的片段

注意：下面的代码段应该是有响应的，因此如果它看起来已损坏，请参阅下面的代码段

*{
保证金：0；
填充：0；
}
正文，html{
宽度：100%；
身高：100%；
}
身体{
显示器：flex；
对齐项目：居中；
背景：url（'https://placeimg.com/800/600/any');
背景尺寸：封面；
背景附件：固定；
}
.集装箱{
宽度：50%；
身高：50%；
位置：相对位置；
保证金：0自动；
溢出：隐藏；
边框：10px实心#009688；
}
.切：之后{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
背景#009688；
变换原点：0%100%；
变换：旋转（-60度）；
排名：0；
}
.切：以前{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
背景#009688；
变换原点：0%0%；
变换：旋转（60度）；
排名：0；
}
.货柜：之后{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
背景#009688；
变换原点：100%0%；
变换：旋转（-60度）；
排名：0；
}
.货柜：在{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
背景#009688；
变换原点：100%100%；
变换：旋转（60度）；
排名：0；
}

---

对于这个透明的六边形切口，我建议使用带有：

svg{
显示：块；
宽度：70%；
高度：自动；
保证金：0自动；
}
路径{
过渡：填充。5s；
填写：#E3DFD2；
}
路径：悬停{
填充：粉红色；
}
正文{背景：url（'https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'）；背景位置：中间；背景大小：封面；}

---

SVG是实现这类功能的最佳工具，而实现这一目标的最大因素是更容易创建和维护SVG等形状

但是这些可以通过CSS

transform

以另一种方式通过更简单的转换来完成。我们所需要做的就是利用

skew

变换并根据所需的形状设置倾斜角度

对于六边形，每边之间的角度为120度，因此元素必须倾斜+/-30度。对于五边形，每边之间的角度为108度，因此下半部分的倾斜角度为+/-18度，而上半部分的倾斜角度为+/-36度。对于菱形，每边之间的角度为90度，因此倾斜角度为+/-45度

这种方法的几个优点是：（并不是SVG没有这些优点）

• 使用这种方法创建的形状是响应性的（尝试在演示中的形状上悬停）
• 鉴于IE8即将推出，转换得到了很好的支持（微软自己也从1月16日起停止支持IE8）。与SVG相比，这并不坏，因为SVG具有相同的浏览器支持

但是，使用CSS有很多缺点：

• 为了产生形状，需要额外的元素
• 这些功能只能在IE9+中使用（也就是说，支持转换的浏览器）。缺点不是与SVG相比，而是一般而言
• 非剪切区域的填充不能是渐变或图像。它只能是纯色
• 可以添加悬停效果（如演示中所示），但当鼠标悬停在剪切区域上时，也会触发悬停效果，因为它仍然是容器的一部分，即使它是透明的

.shape{
位置：相对位置；
高度：100px；
边框：20px实心淡紫色；
溢出：隐藏；
}
.六边形{
宽度：计算（100px+（100px*0.577））；/*宽度=六角体的高度+（高度*tan 30）*/
}
五角大楼{
宽度：calc（100px*1.051）；/*宽度=高度*1.618/1.539（五角大楼）（来源：Wiki-https://en.wikipedia.org/wiki/Pentagon */
}
.钻石{
宽度：100px；/*高度=菱形的宽度*/
}
六角形