Hexagon shape with a border/outline
It is not directly possible to achieve this, as hexagons are created by borders through pseudo elements. An alternative would be to overlay hexagons within hexagons, thus achieving the same desired results.
Here is an example of what can be achieved:
LIVE EXAMPLE HERE
HTML - pretty basic, continue the same pattern for more borders.
<div class="hex">
<div class="hex inner">
<div class="hex inner2"></div>
</div>
</div>
CSS (three layers - two inner elements)
Start with the hexagon class, defining the shape/size/colors:
.hex {
margin-top: 70px;
width: 208px;
height: 120px;
background: #6C6;
position: relative;
}
.hex:before, .hex:after {
content:"";
border-left: 104px solid transparent;
border-right: 104px solid transparent;
position: absolute;
}
.hex:before {
top: -59px;
border-bottom: 60px solid #6C6;
}
.hex:after {
bottom: -59px;
border-top: 60px solid #6C6;
}
Style the inner class and use transform: scale()
to proportionally decrease the dimensions of the inner elements. In this example, a scale of scale(.8, .8)
is used. If you want thicker borders, decrease the numbers; conversely, if you want thinner borders, increase the numbers.
Specify and overwrite the colors, also increase the z-index
value to bring the element forward.
.hex.inner {
background-color:blue;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:1;
}
.hex.inner:before {
border-bottom: 60px solid blue;
}
.hex.inner:after {
border-top: 60px solid blue;
}
Style the second nested element, essentially following the same steps as last time. It's worth nothing that the same scale
value is used, because it is within an already scaled element. Of course, you can use whatever you want; this is just a basic example.
.hex.inner2 {
background-color:red;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:2;
}
.hex.inner2:before {
border-bottom: 60px solid red;
}
.hex.inner2:after {
border-top: 60px solid red;
}
Again, live example here
Giving hexagon div a border
svg
solution:
You can do this easily if you use svg
:
<svg width="240" height="300" viewBox="-1 -1 240 300"> <path d="M104,0 L208,60 L208,180 L104,240 L0,180 L0,60z" stroke="black" stroke-width="1" fill="#64C7CC" /></svg>
Make hexagon shape with border, rounded corners and transparent background
Hexagon with rounded corners are complex shapes to create and I usually recommend using SVG for creating them. The need for a transparent background makes it even more better suited for SVG. With SVG you can get better control over the shape, its curves etc and you don't have to add a lot of extra (unnecessary) elements to your markup also.
All that is needed for creating this shape with SVG is to use a single path
element along with a few L
(line) and A
(arc) commands. The L
(line) command basically draws a line from point 1 to point 2 whereas the A
(arc) command draws an arc of the specified radius (the first two values immediately following the A
command).
You can read more about the SVG path
element and its commands in this MDN tutorial.
svg { height: 200px; width: 240px;}path { stroke: #777; fill: none;}
body { background: black;}
<svg viewBox='0 0 120 100'> <path d='M38,2 L82,2 A12,12 0 0,1 94,10 L112,44 A12,12 0 0,1 112,56 L94,90 A12,12 0 0,1 82,98 L38,98 A12,12 0 0,1 26,90 L8,56 A12,12 0 0,1 8,44 L26,10 A12,12 0 0,1 38,2' /></svg>
How to make a border around clip path shape?
This is what i Got so far,
I've used filter: drop-shadow()
For your transparent background you can use same color as parent
.hexagon{ background: white;/*giving color is important*/ padding: 40px; width: 20%; text-align: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}/* main code */.container{ filter: drop-shadow(0px 0px 1px black);}
<div class="container"> <div class="hexagon">Button</div> </div>
Related Topics
Elongated Hexagon Shaped Button Using Only One Element
Changing the Color of an Hr Element
Best Way to Include Css? Why Use @Import
Html Inside Twitter Bootstrap Popover
Switching the Order of Block Elements With Css
When Should One Use HTML Entities
Is an Anchor Tag Without the Href Attribute Safe
Embed Image in a ≪Button≫ Element
Closing HTML ≪Input≫ Tag Issue
Colspan/Rowspan For Elements Whose Display Is Set to Table-Cell
Setting the Character Encoding in Form Submit For Internet Explorer
Empty Vertical Space Between Columns in Bootstrap 4
How to Determine Height of Content-Box of a Block and Inline Element
Bootstrap 3 to Bootstrap 4 Cols No Longer Horizontally Aligned
<Fieldset> Resizes Wrong; Appears to Have Unremovable 'Min-Width: Min-Content'
Center Aligning a Fixed Position Div
Should I Size a Textarea with CSS Width/Height or HTML Cols/Rows Attributes