Шестиугольная форма с CSS3

Question

Может ли такой шестиугольник быть создан с помощью чистого CSS3?

Спасибо за любую помощь!

Answer 1

Простой поиск превратили вверх: CSS Hexagon Tutorial

Реферировано с сайта:

Put a 104px × 60px div with a background colour between them and you get (the hexagon):

width: 0; 
border-bottom: 30px solid #6C6; 
border-left: 52px solid transparent; 
border-right: 52px solid transparent; 

width: 104px; 
height: 60px; 
background-color: #6C6; 

width: 0; 
border-top: 30px solid #6C6; 
border-left: 52px solid transparent; 
border-right: 52px solid transparent; 

Answer 2

в CSS3, все возможно.

HTML:

<div class="hexagon hexagon1"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div> 
<div class="hexagon hexagon2"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>  
<div class="hexagon dodecagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div> 

CSS:

BODY 
{ background: url(http://placekitten.com/600/600) 
} 

.hexagon 
{ overflow: hidden; 
    visibility: hidden; 
    -webkit-transform: rotate(120deg); 
    -moz-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); 
    -o-transform: rotate(-60deg); 
    transform: rotate(-60deg); 
} 

.hexagon-in2 
{ width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-position: 50%; 
    background-image: url(http://placekitten.com/240/240); 
    visibility: visible; 
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    -o-transform: rotate(-60deg); 
    transform: rotate(-60deg); 
} 

.hexagon-in2:hover 
{ background-image: url(http://placekitten.com/241/241) 
} 

.hexagon1 
{ width: 400px; 
    height: 200px; 
    margin: 0 0 0 -80px; 
} 

.hexagon2 
{ width: 200px; 
    height: 400px; 
    margin: -80px 0 0 20px; 
} 

.dodecagon 
{ width: 200px; 
    height: 200px; 
    margin: -80px 0 0 20px; 
} 

Демо:http://jsfiddle.net/kizu/bhGn4/

Answer 3

#hexagon 
{ width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 
} 

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

Answer 4

Вы можете использовать этот scss-mixin для создания шестиугольника с границей. Создает шестиугольник любого размера или цвета.

HTML Markup:

<div class="hex-holder"> 
    <div class="hex"></div> 
    <div class="hex-content"></div> (<-- optional) 
</div> 

1) простой метод:

div.hex-holder{ 
    @import hexagon($width, $color, $rotation, $border, $radius) 
} 

где:

• ширина = ширина вашего шестиугольника
• цвет = граница цвета
• rotation = r otation
• граница = ширина границы

• радиус = граница радиуса (раундов углы слегка)

  @mixin($width: 140px $color: black, $rotation: 0, $border: 3px, $radius: 10px){ 
  
  $height: $width * tan(60deg) - $border*2 - $radius/2;  
  $naturaldiameter: $width + 2 * cos(60deg); 
  position: relative; 
  
  div.hex { 
      transform: rotate($rotation + deg); 
      width: $width; 
      height: $height; 
      border-radius: $radius; 
      position: relative; 
      @include content-box(); 
      border-top: $border solid $color; 
      border-bottom: $border solid $color; 
      margin: auto; 
  
      div.hex-content{ 
       max-width: $height; 
       position: absolute; 
       z-index: 2; 
       width: 100%; 
       height: 100%; 
       top: 0; 
       transform: rotate(-1*$rotation+deg); 
      } 
  } 
  
  div.hex::after, div.hex::before{ 
      content: ""; 
      margin-top: $border * -1; 
      transform: rotate(-60deg); 
      display: block; 
      position: absolute; 
      border-top: $border solid $color; 
      border-bottom: $border solid $color; 
      width: $width; 
      height: $height; 
      border-radius: $radius; 
  } 
  
  div.hex::before{ 
      transform: rotate(60deg); 
  }} 
  

2) усовершенствованный метод: - это лучше, если ваши шестигранные изменения размера или цвет. она позволяет изменить только часть свойств (например, hex_size при изменении размера экрана.)

div.hex-holder{ 
    @include hex_basics(30); 
    @include hex_color($bordercolor1, $backgroundcolor1); 
    @include hex_size($width1, $borderwidth1, $borderradius1); 

    &:hover{ 
     @include hex_color($bordercolor2, $backgroundcolor2); 
    } 

    @media(query){ 
     @include hex_size($width2, $borderwidth2, $borderradius2); 
    } 
} 




@mixin hex_basics($rotation: 0){ 
    position: relative; 

    div.hex{ 
     transform: rotate($rotation + deg); 
     position: relative; 
     @include content-box(); 
     margin: auto; 
     border-top-style: solid; 
     border-bottom-style: solid; 
    } 

    div.hex-content{ 
     position: absolute; 
     z-index: 2; 
     border-radius: 40%; 
     width: 100%; 
     height: 100%; 
     top: 0; 
     display: block; 
    } 
    div.hex::after, div.hex::before{ 
     content: ""; 
     transform: rotate(-60deg); 
     display: block; 
     position: absolute; 
     border-top-style: solid; 
     border-bottom-style: solid; 
    } 
    div.hex::before{ 
     transform: rotate(60deg); 
    } 
} 

@mixin hex_size($width: 140px, $border-width: 3px, $radius: 10px){ 
    $height: $width * tan(60deg) - $border-width *2 - $radius/2; 
    $naturaldiameter: $width + 2 * cos(60deg); 

    div.hex::after, div.hex::before, div.hex{ 
     margin-top: $border-width * -1; 
     border-top-width: $border-width; 
     border-bottom-width: $border-width; 
     width: $width; 
     height: $height; 
     border-radius: $radius; 
    } 
} 

@mixin hex_color($border-color: black, $background-color: white){ 
    div.hex::after, div.hex::before, div.hex{ 
     border-top-color: $border-color; 
     border-bottom-color: $border-color; 
     background-color: $background-color; 
    } 
} 

Примечание: div.hex-content не могут быть приведены в соответствие свойство, вы можете установить top свойство, чтобы исправить это.