Как создать форму шестиугольника выреза?

Ответ 1

Для этого прозрачного шестигранника вырезания я бы предложил использовать встроенный SVG с элемент пути:

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>

Ответ 2

Этот тип формы может быть достигнут путем заполнения внешней части шестиугольника с использованием элементов. Для достижения этого эффекта для каждого элемента должны применяться разные 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>

Ответ 3

SVG - лучший инструмент для таких вещей, и самым большим фактором, способствующим этому, является то, что легче создавать и поддерживать такие формы, как SVG.

Но это можно сделать с помощью CSS transform по-другому с более простыми преобразованиями. Все, что нам нужно сделать, это использовать преобразование skew и задать угол наклона на основе требуемой формы.

Для шестиугольников угол между каждой стороной составляет 120 градусов, поэтому элементы должны быть перекошены на +/- 30 градусов. Для пятиугольников угол между каждой стороной составляет 108 градусов, поэтому углы наклона на нижней половине будут +/- 18 градусов, а верхняя половина - +/- 36 градусов. Для алмаза угол между каждой стороной составляет 90 градусов, поэтому углы наклона будут +/- 45 градусов.

A несколько положительных точек этого подхода: (не то, что SVG не имеет этих данных)

• Формы, созданные с использованием этого подхода, являются отзывчивыми (попробуйте навести на фигуры в демо)
• Преобразования довольно хорошо поддерживаются, учитывая, что IE8 находится на пути (Microsoft сама останавливает поддержку IE8 с января 16). Это неплохо по сравнению с SVG, потому что SVG имеет ту же поддержку браузера.

Есть немало недостатков использования CSS, хотя:

• Для создания формы необходимы дополнительные элементы.
• Они будут работать только в IE9 + (то есть в браузерах, которые поддерживают преобразования). Недостаток не по сравнению с SVG, но в целом.
• Заполнить область, отличную от выреза, не может быть градиентом или изображением. Это может быть только сплошной цвет.
• Эффекты Hover могут быть добавлены (как показано в демонстрации), но это будет срабатывать, когда мышь находится над областью вырезания также потому, что она все еще является частью контейнера, даже если она прозрачна.

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

Ответ 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>

Ответ 5

Этот ответ иллюстрирует затраты на использование только одного элемента

SVG - это инструмент для этого. Любая альтернатива CSS, вероятно, будет очень халатной и причудливой, поэтому я говорю, что лучше всего использовать SVG.

Использование CSS

Используемые свойства:

• box-shadows (для цвета вокруг прозрачной области)
• преобразование перспективы, вращение
• переполнение скрыто
• pseudoelement

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>