it-swarm.com.ru

Форма шестиугольника с бордюром/контуром

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

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

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

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

16
Arkuen

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

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

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

Опять же, живой пример здесь

18
Josh Crozier

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

 enter image description here

Преимущества:

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

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

Основным недостатком является плохая поддержка браузера в настоящее время. CSS clip-path в настоящее время не работает в IE и FF. Проблема с FF может быть исправлена ​​с помощью SVG (встроенного или внешнего) для clip-path (как в следующем фрагменте):

.hexagon {
  position: relative;
  height: 150px;
  width: 150px;
  background: black;
}
.hexagon:before, .double:after {
  position: absolute;
  content: '';
}
.hexagon, .hexagon:before, .double:after {
  -webkit-clip-path: url(#hexagon-clip);
  clip-path: url(#hexagon-clip);
}
.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;
}
.image:before {
  background: url(http://lorempixel.com/200/200);
}
.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;
}
<svg width="0" height="0">
  <defs>
    <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox">
      <path d="M0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0, 0.25z" />
    </clipPath>
  </defs>
</svg>
<div class="hexagon"></div>
<div class="hexagon image"></div>
<div class="hexagon double"></div>

9
Harry

Вы можете создать это, используя только один элемент, используя преобразования 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>

Вы даже можете добавить эффект перехода при наведении на этот шестиугольник: Fiddle (переход при наведении)

enter image description here

Недостатком использования box-shadows здесь является то, что они создают видимые неровные края в Firefox. 

3
The Pragmatick

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

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

enter image description here

jsFiddle здесь

Только будет как border

3
Sobin Augustine

Только что нашел эту ссылку на конструктор шестиугольников , из которого вы можете скопировать 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>

0
JabbaWook