Hexagon shape with CSS3 - css

Question

Can such a hexagon be created with pure CSS3?
Thanks for any help!

Answer 1

You can use the html character ⬢ (hexagon)...
.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;">⬢</span>
<span class="hex1" />
<span class="hex2" />
Or play with the clipping paths...
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>
Or you can try CSS, using ::before and ::after with triangle borders...
.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

A simple search turned this up: CSS Hexagon Tutorial
Referenced from the site:
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

in CSS3, everything is possible.
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;
}
Demo: http://jsfiddle.net/kizu/bhGn4/

Answer 4

you can do gradient hexagon by pure html and css.
Here is HTML & CSS Code :
.hexagon-shape {
position: relative;
overflow: hidden;
background: transparent;
/* add slash at the end of line to see the rhombus *
outline: solid 1px red;/**/
width: 72.28px;
height: 72.28px;
transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}
.hexagon-shape:before {
position: absolute;
right: 6.7%;
bottom: 0;
left: 6.7%;
top: 0;
transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
background: linear-gradient(59.82deg, #0976CE 0%, #0976CE 49.36%, #3A91D7 50.11%, #3A91D7 100%);
content: '';
}
<div class="hexagon-part">
<div class='hexagon-shape'></div>
</div>

Answer 5

You can use this scss-mixin to create a hexagon with a border.
Creates a hexagon in any size or color.
HTML Markup:
<div class="hex-holder">
<div class="hex"></div>
<div class="hex-content"></div> (<-- optional)
</div>
1) simple method:
div.hex-holder{
#import hexagon($width, $color, $rotation, $border, $radius)
}
where:
width = width of your hexagon
color = border-color
rotation = rotation
border = width of border
radius = border-radius (rounds corners slightly)
#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) advanced method:
- this is better if your hexagon changes in size or color.
it allows you to change only a portion of the properties (ex. hex_size when screen size changes)
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;
}
}
note: div.hex-content may not be aligned property, you can set the top property to fix that.

Answer 6

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