帶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屬性來解決這個問題。