我有一个六边形,我想在它的每个 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;
}
但是,这会将文本放置在六边形内部,而不是外部。有什么想法吗?
最佳答案
你可以在那里扔一个外部 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;
}
关于html - 六边形 Angular 上的文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33598595/