Форма шестигранника с рамкой/контуром

Я знаю, что можно создать форму шестиугольника, используя следующий код:

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

Как я могу создать шестиугольник, который заполнен одним цветом и обозначен другим? Я пытаюсь с этим поиграть, но это кажется невозможным.

Любые другие варианты приветствуются, я хотел бы избежать использования изображений.

ОТВЕТЫ

Ответ 1

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

Вот пример того, что может быть достигнуто:

hexagon imageenter image description here

ПРЯМОЙ ПРИМЕР ЗДЕСЬ

HTML - довольно простой, продолжайте использовать тот же шаблон для большего количества границ.

<div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div>

CSS (три слоя - два внутренних элемента)

Начните с класса шестиугольника, определяя форму/размер/цвет:

.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    content:"";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}
.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}
.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

Создайте внутренний класс и используйте transform: scale(), чтобы пропорционально уменьшить размеры внутренних элементов. В этом примере используется шкала scale(.8, .8). Если вы хотите более плотные границы, уменьшите количество; наоборот, если вы хотите уменьшить границы, увеличьте числа.

Укажите и перезапишите цвета, также увеличьте значение z-index, чтобы перенести элемент вперед.

.hex.inner {
    background-color:blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:1;
}
.hex.inner:before {
    border-bottom: 60px solid blue;
}
.hex.inner:after {
    border-top: 60px solid blue;
}

Создайте второй вложенный элемент, по существу следуя тем же самым шагам, что и в прошлый раз. Не стоит того, чтобы использовалось то же значение scale, потому что оно находится в уже масштабированном элементе. Конечно, вы можете использовать все, что хотите; это всего лишь базовый пример.

.hex.inner2 {
    background-color:red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}

Снова живой пример здесь

Ответ 2

Вот еще один способ создания шестиугольников с рамкой (или контуром) с использованием функции clip-path. В этом методе мы используем контейнерный элемент и псевдоэлемент, который имеет меньшие размеры (как height, так и width), чем контейнер. Когда один и тот же clip-path применяется к обоим элементам, background-color элемента контейнера отображается за псевдоэлементом только по краям и делает его похожим на границу/контур фигуры.

введите описание изображения здесь

<сильные > Преимущества:

  • Шестиугольники также могут иметь градиенты или изображения (в основном не сплошной цвет) как background.
  • Форма отзывчивая и может автоматически адаптироваться к любым изменениям в размерах контейнера.

.hexagon {
  position: relative;
  height: 150px;
  width: 150px;
  background: black;
}
.hexagon:before, .double:after {
  position: absolute;
  content: '';
}
.hexagon:before {
  top: 4px;  /* border width */
  left: 4px;  /* border width */
  height: calc(100% - 8px);  /* 100% - (2 * border width) */
  width: calc(100% - 8px);  /* 100% - (2 * border width) */
  background: #6c6;
}
.hexagon, .hexagon:before, .double:after {
  -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%);
}
.image:before {
  background: url(http://lorempixel.com/150/150/nature/1);
}
.double:after {
  top: 8px;
  left: 8px;
  height: calc(100% - 16px);
  width: calc(100% - 16px);
  background: black;
}

/* Just for demo */

.hexagon {
  display: inline-block;
  margin: 20px;
}
<div class="hexagon"></div>
<div class="hexagon image"></div>
<div class="hexagon double"></div>

Ответ 3

Сделано с размещением шестиугольной формы поверх другой. где черный шестиугольник внизу и белый наверху.

Вот результат

enter image description here

jsFiddle здесь

Только будет выглядеть как border

Ответ 4

Вы можете создать это, используя только один элемент, используя преобразования scaleX и rotate. Это использует тот же метод, что и здесь, но с одним дополнительным псевдоэлементом сверху.

Fiddle

body{font-size: 25px;}
div {
    margin: 3em 0;
    width: 10em;
    height: 5.7736em; /*width / 2*0.866*/
    background: orange;
    box-shadow: inset -1.22em 0 0 0 navy, inset 1.22em 0 0 0 navy, inset -2.44em 0 0 0 crimson, inset 2.44em 0 0 0 crimson;
    position: relative;
}
div:before, div:after {
    content: '';
    position: absolute;
    background: inherit;
    width:4.08em; 
    height:4.08em;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleX(1.73) rotate(45deg);
    -moz-transform: scaleX(1.73) rotate(45deg);
    -ms-transform: scaleX(1.73) rotate(45deg);
    transform: scaleX(1.73) rotate(45deg);
}
div:before {
    top: -4.08em;
    box-shadow: inset 0 1em 0 0 navy, inset 1em 0 0 0 navy, inset 0 2em 0 0 crimson, inset 2em 0 0 0 crimson;
}
div:after {
    bottom: 0;
    box-shadow: inset 0 -1em 0 0 navy, inset -1em 0 0 0 navy, inset 0 -2em 0 0 crimson, inset -2em 0 0 0 crimson;
}
<div></div>

Ответ 5

Просто найдите эту ссылку в hexagon designer, который вы можете скопировать html и css, чтобы получить то, что вы хотите. Думал, что оставлю его здесь для всех, кто попадает на этот пост.

Итак, используя инструмент, чтобы иметь белый шестиугольник с зеленым контуром:

.hexagon {
  position: relative;
  width: 100px; 
  height: 57.74px;
  background-color: #ffffff;
  margin: 28.87px 0;
  border-left: solid 5px #28bf20;
  border-right: solid 5px #28bf20;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 70.71px;
  height: 70.71px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 9.6447px;
}

.hexagon:before {
  top: -35.3553px;
  border-top: solid 7.0711px #28bf20;
  border-right: solid 7.0711px #28bf20;
}

.hexagon:after {
  bottom: -35.3553px;
  border-bottom: solid 7.0711px #28bf20;
  border-left: solid 7.0711px #28bf20;
}
<div class="hexagon"></div>