Граница вокруг шестиугольника формы

Question

Я пытаюсь установить границу вокруг шестиугольника формы или более точную область с шестиугольной формой из 3 разделов. Я пробовал несколько разных способов создания границы, играющей вокруг с видимостью div. То, что у меня есть в приведенном ниже примере, является самым близким я пришел, но все еще показываю переполнение divs, которые должны быть скрыты.

Я нашел код для создания шестиугольников формы здесь или на git не помню, где именно. так что это не мое творение.

.hexagon { 
 
    overflow: hidden; 
 
    -webkit-transform: rotate(120deg); 
 
    -moz-transform: rotate(120deg); 
 
    -ms-transform: rotate(120deg); 
 
    -o-transform: rotate(120deg); 
 
    transform: rotate(120deg); 
 
    cursor: pointer; 
 
} 
 
.hexagon-in1 { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transform: rotate(-60deg); 
 
    -moz-transform: rotate(-60deg); 
 
    -ms-transform: rotate(-60deg); 
 
    -o-transform: rotate(-60deg); 
 
    transform: rotate(-60deg); 
 

 
} 
 
.hexagon-in2 { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 50%; 
 
    visibility: visible; 
 
    -webkit-transform: rotate(-60deg); 
 
    -moz-transform: rotate(-60deg); 
 
    -ms-transform: rotate(-60deg); 
 
    -o-transform: rotate(-60deg); 
 
    transform: rotate(-60deg); 
 
} 
 

 
.hexagon { 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 

 
#hex1_bg{ background-color: rgb(181,144,223) } 
 

 
.hexagon, .hexagon-in1, .hexagon-in2{ 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    border-left: 5px solid gold; 
 
    border-right: 5px solid gold; 
 
}

<div class="hexagon" id="hex1"> 
 
\t <div class="hexagon-in1"> 
 
\t \t <div class="hexagon-in2" id="hex1_bg"> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Update:

не был доволен взглядами предлагаемого решения он делает исправить пограничную проблему, но создала другую проблему для меня с указателем уже меняется, когда Hoover над белым пространством, окружающим шестиугольник

Я получаю именно то, что хочу, добавив 3 дополнительных div и множество дополнительных css, которые все еще не устраивают его, поэтому надеемся, что у кого-то есть предложения ,

Код показывает, что я хочу создать, но предпочтительнее с меньшим количеством кода.

.hexagon { 
 
    position: relative; 
 
    overflow: hidden; 
 
    visibility: hidden; 
 
    -webkit-transform: rotate(120deg); 
 
    -moz-transform: rotate(120deg); 
 
    -ms-transform: rotate(120deg); 
 
    -o-transform: rotate(120deg); 
 
    transform: rotate(120deg); 
 
    cursor: pointer; 
 
} 
 
.hexagon-in1 { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transform: rotate(-60deg); 
 
    -moz-transform: rotate(-60deg); 
 
    -ms-transform: rotate(-60deg); 
 
    -o-transform: rotate(-60deg); 
 
    transform: rotate(-60deg); 
 
} 
 
.hexagon-in2 { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 50%; 
 
    visibility: visible; 
 
    -webkit-transform: rotate(-60deg); 
 
    -moz-transform: rotate(-60deg); 
 
    -ms-transform: rotate(-60deg); 
 
    -o-transform: rotate(-60deg); 
 
    transform: rotate(-60deg); 
 
} 
 

 
.hexagon { 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 

 
#hex1_bg{ background-color: rgb(181,144,223) } 
 

 
.bordergon{ 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    border-left: 2px solid red; 
 
    border-right: 2px solid red; 
 
} 
 
.bordergon-in1{ 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    -webkit-transform: rotate(-60deg); 
 
    -moz-transform: rotate(-60deg); 
 
    -ms-transform: rotate(-60deg); 
 
    -o-transform: rotate(-60deg); 
 
    transform: rotate(-60deg); 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    border-left: 2px solid red; 
 
    border-right: 2px solid red; 
 
} 
 
.bordergon-in2{ 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    -webkit-transform: rotate(-120deg); 
 
    -moz-transform: rotate(-120deg); 
 
    -ms-transform: rotate(-120deg); 
 
    -o-transform: rotate(-120deg); 
 
    transform: rotate(-120deg); 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    border-left: 2px solid red; 
 
    border-right: 2px solid red; 
 
}

<div class="hexagon" id="hex1"> 
 
\t <div class="hexagon-in1"> 
 
\t \t <div class="hexagon-in2" id="hex1_bg"> 
 
      <div class="bordergon"></div> 
 
      <div class="bordergon-in1"></div> 
 
      <div class="bordergon-in2"></div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

Я думаю, что у меня есть решение. Существует довольно много CSS, но он использует только два div. У вас есть шестиугольник внутри шестиугольника, а внешний - как граница.

#hexagon { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 
    margin-top: 25px; 
} 

#hexagon:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 
} 

#hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 
} 

#hexagonIn { 
    width: 95%; 
    height: 95%; 
    background: blue; 
    position: relative; 
    margin: auto; 
    margin-top: 25px; 
} 

#hexagonIn:before { 
    content: ""; 
    position: absolute; 
    top: -22px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 47px solid transparent; 
    border-right: 47px solid transparent; 
    border-bottom: 23px solid blue; 
} 

#hexagonIn:after { 
    content: ""; 
    position: absolute; 
    bottom: -24px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 47px solid transparent; 
    border-right: 47px solid transparent; 
    border-top: 24px solid blue; 
    z-index: 1; 
} 

И HTML:

<div id="hexagon"> 
    <div id="hexagonIn"></div> 
</div> 

Много CSS на самом деле может быть сокращен, если вы можете быть обеспокоены. Это на порядок меньше, а CSS довольно чистый.

Также в будущем я советую использовать префикс. Это сценарий JS, который автоматически добавляет браузеры префиксы ваш CSS означает, что вы можете просто положить

transform: rotate(-60deg); 

И это добавит -moz-, -webkit-, -ms- и -О-.

Надеется, что это работает для вас ..