Source Matters Source Matters - 5 days ago 5
CSS Question

Can I replicate this image using only html and css - specifically the shape and edges?

I'd like to replicate the image below using only html and css if possible. I'd like to use this as a "badge" with changing icons and colors. A static image won't work for me:

enter image description here

All seems doable, but I do not know how to replicate the actual shape of the badge itself (the green part). Is there a particular css directive I need to look into to achieve this?

EDIT: Appears a "Duplicate Question" concern was raised. Please note the linked to question does NOT include an image or text in the center of the hexagon, this one does. This adds a bit of complexity to the problem, and thus the new question. Based on the answers in this question, I was able to formulate a better google search and came across a codepen that worked beautifully for me. I vote for re-opening the question.

Answer

Yes possible. But its better if you use SVG. Here is an example with rounded corner

body{margin:0;}
.hexagon {
    width: 120px;
    height: 60px;
    position: relative;
    margin:50px 10px;
}
.hexagon, .hexagon:before, .hexagon:after {
    background: green;
    border-radius: 5px  
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    left: 23px;
    width: 74px;
    height: 70px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
    top: -35px;
}
.hexagon:after {
    top: 35px;
}
.hexagon span {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 70px;
    background:green;
    z-index: 1;
}
 <div class="hexagon"><span></span></div>

Comments