1

Is there any way I can give this hexagonal shape a border?

The hexagon is made up of three parts top(triangle) middle(rectangle) and bottom(triangle).

I am having trouble because in order to make the top and bottom triangles of the hexagon, I have to use "border: transparent".

CSS:

.hex-mid {
    width: 208px;
    height: 120px;
    background-color: #64C7CC;
}
.hex-top {
    width: 0;
    border-bottom: 60px solid #64C7CC;
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
}
.hex-bot {
    width: 0;
    border-top: 60px solid #64C7CC;
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
}

HTML:

<ul class="hexagon">
  <li class="hex-top"></li>
  <li class="hex-mid"></li>
  <li class="hex-bot"></li>
</ul>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
Stretch0
  • 8,362
  • 13
  • 71
  • 133
  • Refer to this answer : [http://stackoverflow.com/questions/19418486/css3-hexagon-shape-with-a-border-outline](http://stackoverflow.com/questions/19418486/css3-hexagon-shape-with-a-border-outline) – codingrose Dec 04 '14 at 06:58

2 Answers2

2

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>

CSS solution:

You can add :before :pseudo-elements and position them behind the main elements.

.hex-mid {
  width: 208px;
  height: 120px;
  background-color: #64C7CC;
  position: relative;
}
.hex-mid:before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 122px;
  background-color: black;
  margin-left: -1px;
  margin-top: -1px;
}
.hex-top {
  width: 0;
  border-bottom: 60px solid #64C7CC;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  position: relative;
}
.hex-top:before {
  width: 0;
  content: '';
  position: absolute;
  border-bottom: 60px solid black;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  margin-left: -104px;
  margin-top: -1px;
  z-index: -1;
}
.hex-bot {
  width: 0;
  border-top: 60px solid #64C7CC;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
}
.hex-bot:before {
  content: '';
  position: absolute;
  width: 0;
  border-top: 60px solid black;
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  margin-left: -104px;
  margin-top: -59px;
  z-index: -1;
}
li {
  list-style: none;
}
<ul class="hexagon">
  <li class="hex-top"></li>
  <li class="hex-mid"></li>
  <li class="hex-bot"></li>
</ul>
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
0

Using CSS you can acompish it with

-webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0,1));

on upper and 

-webkit-filter: drop-shadow(0px 2px 0px rgba(0, 0, 0,1));

on lower triangle.

You may then have to assign 

    z-index: 1;
    position:relative;

to your mid section to avoid overlapping.

Hebrus
  • 133
  • 6