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

Question

如何使用 CSS 创建一个六边形的裁切形状？

我所说的切出的六边形是这样的意思：

我能够创建带有背景图片的六边形，但我需要它与图片中的一样。

.hexagon {
  position: relative;
  width: 300px;
  height: 173.21px;
  margin: 86.60px 0;
  background-image: url('https://placeimg.com/300/400/any');
  background-size: auto 346.4102px;
  background-position: center;
}

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 43.93px;
}

/* Counter transform the background image on the caps */
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 300.0000px;
  height: 173.20508075688775px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -106.0660px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -106.0660px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
  width: 300.0000px;
  height: 173.2051px;
  z-index: 2;
  background: inherit;
}

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

Answer 1

这种形状可以通过使用元素填充六边形的外部来实现。应将不同的 transform:rotate(xdeg) 应用于每个元素以实现此效果。

这是创建此效果的片段。

注意：下面的代码片段应该是响应式的，因此如果它看起来有问题，请查看下面的代码片段。

* {
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    background: url('https://placeimg.com/800/600/any');
    background-size: cover;
    background-attachment: fixed;
}

.container {
    width: 50%;
    height: 50%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 10px solid #009688;
}

.cut:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 100%;
    transform: rotate(-60deg);
    top: 0;
}

.cut:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 0%;
    transform: rotate(60deg);
    top: 0;
}

.container:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 0%;
    transform: rotate(-60deg);
    top: 0;
}

.container:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 100%;
    transform: rotate(60deg);
    top: 0;
}

<div class="container">
    <div class="cut"></div>
</div>

固定高度和宽度（全屏观看效果更佳）：

* {
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    background: url('https://placeimg.com/800/600/any');
    background-size: cover;
    background-attachment: fixed;
}

.container {
    width: 500px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 10px solid #009688;
}

.cut:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 100%;
    transform: rotate(-60deg);
    top: 0;
}

.cut:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 0% 0%;
    transform: rotate(60deg);
    top: 0;
}

.container:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 0%;
    transform: rotate(-60deg);
    top: 0;
}

.container:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #009688;
    transform-origin: 100% 100%;
    transform: rotate(60deg);
    top: 0;
}

<div class="container">
    <div class="cut"></div>
</div>

镂空六边形的工作原理是这样的：

Answer 2

对于这个透明镂空六边形，我建议使用inline SVG with the path element:

svg{
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;
}

path{
  transition: fill .5s;
  fill: #E3DFD2;
}
path:hover{
  fill: pink;
}
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-position:center;background-size:cover;}

<svg viewbox="-10 -2 30 14">
  <path d=" M-10 -2 H30 V14 H-10z M2.5 0.66 L0 5 2.5 9.33 7.5 9.33 10 5 7.5 0.66z" />
</svg>

六边形遮罩点计算：

六边形坐标很容易计算。对于上述方向的正六边形：

width = height / sin(60deg)
sin(60deg) ~=0.866

如果宽度为 10（如上例所示），则坐标为：

您可以在第二个 M 之后的 d 属性中找到这些坐标。

为什么要使用 SVG？

在这种情况下使用 SVG 的主要优点是：

可维护性（例如：假设您需要更改蒙版的颜色。在 SVG 中，您很清楚需要更改什么，并且只有一个属性需要更改。）
更短的代码
您可以轻松地使用图像或渐变来填充遮罩
保持形状的边界并仅在符合遮罩的填充上触发鼠标事件（在示例中将鼠标悬停在透明六边形上）。

mask element 的原始示例：

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-position:center;background-size:cover;}

svg{
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;
}

<svg viewbox="-10 -2 30 14" >
  <defs>
    <mask id="mask" x="0" y="0" width="10" height="10">
      <rect x="-10" y="-2" width="40" height="16" fill="#fff"/>
      <polygon points="2.5 0.66 7.5 0.66 10 5 7.5 9.33 2.5 9.33 0 5" />
    </mask>
  </defs>
  <rect x="-10" y="-5" width="30" height="20" mask="url(#mask)" fill="#E3DFD2"/>
</svg>

Answer 3

SVG 是处理这些事情的最佳工具，而最大的贡献因素是它更容易创建和维护像 SVG 这样的形状。

但是这些可以用 CSS transform 以另一种方式完成，也可以使用更简单的转换。我们需要做的就是利用 skew 变换并根据所需的形状设置倾斜角度。

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

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

使用此方法创建的形状具有响应性（尝试将鼠标悬停在演示中的形状上）
考虑到 IE8 即将淘汰（Microsoft 自己从 2016 年 1 月开始停止对 IE8 的支持），Transforms 得到了很好的支持。与 SVG 相比，这 还不错，因为 SVG 具有相同的浏览器支持。

虽然 使用 CSS 有很多缺点：

需要额外的元素才能生成形状。

这些仅适用于 IE9+（即支持转换的浏览器）。缺点不是和SVG比，而是一般

除抠图以外的区域填充不能是渐变或图片。只能是纯色

可以添加悬停效果（如演示中所示），但当鼠标悬停在剪切区域上时会触发它，因为即使它是透明的，它仍然是容器的一部分。

.shape { position: relative; height: 100px; border: 20px solid palevioletred; overflow: hidden; } .shape.hexagon { width: calc(100px + (100px * 0.577)); /* width = height + (height * tan 30) for hexagon */ } .shape.pentagon { width: calc(100px * 1.051); /* width = height * 1.618/1.539 for pentagon (Source: Wiki - https://en.wikipedia.org/wiki/Pentagon */ } .shape.diamond { width: 100px; /* height = width for diamond */ } .hexagon .inner, .pentagon .inner, .diamond .inner { position: absolute; height: 100%; width: 50%; top: 0px; left: 85%; } .diamond .inner { left: 100%; } .shape:after, .shape:before { position: absolute; content: ''; height: 50%; width: 50%; left: -35%; background: palevioletred; } .shape.diamond:before, .shape.diamond:after { left: -50%; } .hexagon .inner:after, .hexagon .inner:before, .pentagon .inner:after, .pentagon .inner:before, .diamond .inner:after, .diamond .inner:before { position: absolute; content: ''; height: 50%; width: 100%; left: 0px; background: palevioletred; } .shape.hexagon:before, .hexagon .inner:after { transform: skew(-30deg); } .shape.hexagon:after, .hexagon .inner:before { transform: skew(30deg); } .shape.pentagon:before { transform: skew(-36deg); } .shape.pentagon:after{ transform: skew(18deg); } .shape.diamond:before, .diamond .inner:after { transform: skew(-45deg); } .shape.diamond:after, .diamond .inner:before { transform: skew(45deg); } .pentagon .inner:before { transform: skew(36deg); } .pentagon .inner:after { transform: skew(-18deg); } .shape:before, .inner:before { top: 0px; transform-origin: right bottom; } .shape:after, .inner:after { bottom: 0px; transform-origin: right top; } /* just for demonstrating responsiveness */ .shape { float: left; margin: 10px; transition: all 1s linear; } .shape:hover{ height: 150px; } .shape.hexagon:hover { width: calc(150px + (150px * 0.577)); } .shape.pentagon:hover { width: calc(150px * 1.051); } .shape.diamond:hover { width: 150px; } body { background: url(http://lorempixel.com/500/500/nature/6) fixed; background-size: cover; }

<div class='shape hexagon'> <div class='inner'></div> </div> <div class='shape pentagon'> <div class='inner'></div> </div> <div class='shape diamond'> <div class='inner'></div> </div>

Answer 4

SVG 方法显然不错！但我尝试通过 CSS 完成它！不知怎的，我设法把它弄到这里...

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
body {
  background: url('http://lorempicsum.com/up/627/300/4') no-repeat top left;
  background-size: cover;
  padding-top: 10%;
}
.parent {
  margin: 0 auto;
  display: table;
  width: 400px;
  height: 230px;
  text-align: center;
  table-layout: fixed;
}
.orange {
  display: table-cell;
  vertical-align: middle;
  background: transparent;
  width: 100%;
  height: 230px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-left: 137px solid orange;
  border-right: 137px solid orange;
}
.one,
.two {
  position: relative;
  width: 126px;
  height: auto;
  display: block;
  border-left: 28px solid orange;
  border-right: 28px solid orange;
  margin: 0 auto;
}
.one {
  border-top: 60px solid transparent;
  border-bottom: 60px solid orange;
}
.two {
  border-top: 60px solid orange;
  border-bottom: 60px solid transparent;
}

<div class="parent">
  <div class="orange">
    <div class="two"></div>
    <div class="one"></div>
  </div>
</div>

Answer 5

这个答案说明了仅使用一个元素的成本

SVG 是实现此目的的工具。任何 CSS 替代方案都可能非常古怪和古怪，所以我说最好是使用 SVG。

使用CSS

使用的属性是：

box-shadows（透明区域周围的颜色）
透视变换、旋转
溢出隐藏
伪元素

body {
  background:url('http://i.imgur.com/TYP4Xka.jpg');
}
#box {
  height: 400px;
  width: 400px;
  position: relative;
  box-shadow: inset 70px 0 0 #444, inset -70px 0 0 #444, inset 0 0 0 50px #444;
  overflow: hidden;
}

#box:before {
  content: "";
  position: absolute;
  height: 150px; 
  width: 259.8px; /* w = h * sqrt(3) bcoz w = 2*h*cos(30deg) */
  top: 125px; /* (parentHeight - pseudoHeight)/2 */
  left: 70.1px; /* (parentWidth - pseudoWidth)/2 */
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
  box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}

#box:after {
  content: "";
  position: absolute;
  height: 150px; 
  width: 259.8px;
  top: 125px;
  left: 70.1px;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  transform: rotate(120deg);
  box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}

<div id="box"></div>

注意

您也可以在动画中改变形状，但要注意。不要对任何东西使用很多 box-shadows，尤其是动画。 Box- shadow CPU 使用率非常高。

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

How do I create a cut-out hexagon shape?

html

css

svg

css-shapes

六边形遮罩点计算：

为什么要使用 SVG？

使用CSS