相关疑难解决方法(0)

因此,我需要使用CSS制作重复的六边形图案.如果需要图像,我可以去那里,但我更愿意尽可能使用CSS.

以下是我想要创建的内容:

基本上,我只需要一种方法来创建六边形形状,然后在它们上面叠加文本/图像.我还没有太多代码,因为我不确定从哪里开始.问题是,我可以使用<div>六角形的形状,如(http://css-tricks.com/examples/ShapesOfCSS/)所示,但它们不会连接.我可以使用重复的六边形图案,但后来我无法指定特定形状所需的文本或图像的确切位置.在此先感谢您的帮助.

我必须创建一个六边形,我真的希望它是完整的HTML和CSS.它几乎完成了,除了它不是完全对称的事实.左角未与右角对齐.目前的css:

.hexagon.outer {
    width: 318px;
    height: 452px;
    position: relative;
}
.hexagon.outer, .hexagon.outer:before, .hexagon.outer:after {
   background-repeat:no-repeat;
    background-color: #585858;
}
.hexagon.outer:before, .hexagon.outer:after {
    content: "";
    position: absolute;
    width: 262px;
    height: 262px;
    top:95px;
    -moz-transform: rotate(54.5deg) skew(22.5deg);
    -webkit-transform: rotate(54.5deg) skew(22.5deg);
    transform: rotate(54.5deg) skew(22.5deg);
}
.hexagon.outer:before {
    left: -130px;
}
.hexagon.outer:after {
    left: 186px;
}
.hexagon.outer span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 55px;
    background:#585858;
    z-index: 1;
}

.hexagon.inner {
    width: 276px;
    height: 372px;
    position: relative;
    margin:0 auto;
    top: 40px;
    z-index:4; …