Question

我有一个六边形，我想在它的每个角落写一些东西。确切地说，我想从六角形的外部区域命名它的每个角落。您可以在此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/

六角形角落的文字

1 个答案: