html - 六边形 Angular 上的文字

Question

我有一个六边形，我想在它的每个 Angular 上写点东西。确切地说，我想从六边形的外部区域命名它的每个 Angular 。你可以在这个 jsfiddle 中看到代码.这是我现在拥有的:

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;
}

但是，这会将文本放置在六边形内部，而不是外部。有什么想法吗？

Answer 1

你可以在那里扔一个外部 div，并使用 absolute 和 transform 的组合，但我打赌 SVG 是理想的。

.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/