7

这不是任何重复请帮助我

我在这里得到了一些技巧http://jsfiddle.net/kizu/bhGn4/

我想用 动态创建它CSS，那么该怎么做呢？

每当添加到设计中的任何新条目都会自动调整。

我努力搜索，在这里我得到了一些关于圆形的帮助

如何用css，javascript围绕一个圆圈创建圆圈？

我想要的六边形一样的东西

在此处输入图像描述

4

3 回答 3

2

浏览我创建的这个演示：

.hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: absolute;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}
.hex1 {
  top: 20px;
  left: 0px;
}
.hex2 {
  top: 20px;
  left: 110px;
}
.hex3 {
  top: 20px;
  left: 220px;
}
.hex4 {
  top: 110px;
  left: 55px;
}
.hex5 {
  top: 110px;
  left: 165px;
}
.hex6 {
  top: 110px;
  left: 275px;
}
<div style="position:absolute; top:30px">
  <div class="hexagon hex1"></div>
  <div class="hexagon hex2"></div>
  <div class="hexagon hex3"></div>
  <div class="hexagon hex4"></div>
  <div class="hexagon hex5"></div>
  <div class="hexagon hex6"></div>
</div>

于 2013-09-26T12:28:12.033 回答
0

这里有一个关于使用 CSS 创建六边形形状的很棒的教程。在开始时查看分步指南。

使用纯 CSS3 创建六边形

另请参阅 CSSTricks 上的示例。您将了解如何解决此类问题。

CSS的形状

希望有帮助！:)

于 2014-01-16T11:52:20.540 回答
0

看看这个 CSS hexagon 教程，它描述了如何创建六边形形状并能够使用 calc() 调整它们的大小。

您只需要一个高度值，其余的为您完成。它也只使用一个类

于 2014-01-26T21:02:28.710 回答