Single div horizontal CSS hexagon button

Question

I'd like to create a CSS button in the shape of a hexagon using a single div to keep the markup clean. I've been experimenting with before and after pseudo elements and can do it with the hexagon 'points' at top and bottom but would like to do it with them pointing left and right to fit the rest of my theme. I've got close but I can't get the after pseudo element where I want it. Can anyone fix this?

Here's where I'm up to:

#hex {
  background-color:green;
  width:100px;
  height:100px;
  float:left;
  display:block;
}

#hex::before {
  content:"";
  border-top:50px solid red;
  border-bottom:50px solid red;
  border-right:30px solid blue;
  float:left;
}

#hex::after {
  content:"";
  border-top:50px solid red;
  border-bottom:50px solid red;
  border-left:30px solid blue;
  float:left;
}

and there's a JS Fiddle at http://jsfiddle.net/higginbottom/YKx2M/

Answer 1

try this example: http://jsbin.com/ipaked/6 (tested on Fx and Chrome)

relevant CSS

.hexagon {
  position: relative;
  width: 124px;
  height: 100px;
  background: #d8d8d8;
}

.hexagon:after,
.hexagon:before {
  position: absolute;
  content: "";
  z-index: 1;
  top: 0;  
  width: 0px;
  background: #fff;
  border-top: 50px transparent solid; 
  border-bottom: 50px transparent solid;
}

.hexagon:before {
    left: 0;
    border-right: 30px #d8d8d8 solid; 
}
.hexagon:after {
    right: 0;
    border-left: 30px #d8d8d8 solid; 
}

(Adjust border-width and size of the hexagon so it can look as you prefer.)

---

As alternative you can also use a single pseudoelement in which you could show the black hexagon unicode character U+2B21, like in this example: http://jsbin.com/ipaked/7

CSS

.hexagon {
  position: relative;
  width: 120px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.hexagon:before {
  position: absolute;
  content: "\2B21";
  font-size: 160px;
  z-index: 1;
  width: 100%; 
  height: 100%;
  left: 0;
  top: 0;  
}

This is probably a better choice (if using a relative font size) so the hexagon can adjust itself when the user increase or decrease the base font-size on his browser.

Answer 2

I'm using clip-path:

.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  padding: 0.375rem 2rem;
  
  --btn-raise: 1rem;
  clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
  background-color: #fefd64;
  text-transform: uppercase;
}

<a class="btn" href="/call">Call call</a>