六角形与CSS3

Question

可以用纯CSS3创建这样的六边形吗？

谢谢你的帮助!

Answer 1

您可以使用 html 字符⬢（六边形）...

.hex1::before {
  content: "\2B22";
  color: orange;
  font-size:135px;
}

.hex2::before {
  content: "\2B22";
  display:block;
  color: magenta;
  font-size:135px;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

<span style="color:blue; font-size:135px;">&#x2B22;</span>
  
<span class="hex1" />
  
<span class="hex2" />

或者使用剪切路径......

div {
  height: 100px;
  width: 100px;
}

.hex3 {
  background: red;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.hex4 {
  background: blue;
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

<div class="hex3"></div>

<div class="hex4"></div>

或者你可以尝试 CSS，使用::before和::after带有三角形边框......

.hexagon {
  height: 200px;
  width: 120px;
  background: red;
  position:relative;
  left:50px;
  box-sizing: border-box;
}
.hexagon::before, .hexagon::after {
  content:"";
  position: absolute;
  height: 0;
  width: 0; 
  top:0;
  /* half height */
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent; 
}
.hexagon::before {
  left:-50px;
  border-right:50px solid red; 
}
.hexagon::after {
  right:-50px;
  border-left:50px solid red; 
}

<div class="hexagon">here is some content inside the hex if you want...</div>

Answer 2

一个简单的搜索转向了这一点:CSS Hexagon教程

从网站引用:

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 3

在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/