带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标记：

<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浮选
• 边界=边框的宽度

• 半径为边界半径（略发角）

  @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属性来解决这个问题。