Text in the corners of a hexagon

Question

I have a hexagon and I would like to write something at every corner of it. To be exact, I would like to name every corner of it, from the outside area of the hexagon. You can see the code in this jsfiddle. Here is what I am having right now:

HTML:

<div class="hexagon"><span>bla</span></div>

CSS:

.hexagon span {
  display: block;
  position: absolute;
  top:2.8867513459481287px;
  left: 0;
  width:290px;
  height:167.4316px;
  z-index: 2;
  background: inherit;
}

However, this will place the text inside the hexagon, not outside it. Any ideas please?

Answer 1

You can toss an outer div on there, and use a combination of absolute and transform but I bet SVG would be ideal.

.outer span {
    position: absolute;
    z-index: 20;
}

.outer span:nth-of-type(1) {
    top: 3rem;
    left: 0;
    color: red;
    transform: rotate(-30deg);
}

.outer span:nth-of-type(2) {
    top: 0;
    left: 50%;
    transform: rotate(30deg) translate(.5rem, -1rem);
    color: green;
}

.outer span:nth-of-type(3) {
    top: 6rem;
    right: 0;
    transform: rotate(90deg) translate(1rem, -2rem);
}

.outer span:nth-of-type(4) {
    bottom: 0;
    left: 0;
}

.outer span:nth-of-type(5) {
    bottom: 0;
    left: 50%;
}

.outer span:nth-of-type(6) {
    bottom: 0;
    right: 0;
}

http://jsfiddle.net/sheriffderek/n6afyLjb/1/