Hexagon shape with CSS3
Can such a hexagon be created with pure CSS3?
Thanks for any help!
Solution 1:
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;
Solution 2:
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>