html - 使用 CSS3 生成重复的六边形图案

标签 html css css-shapes

所以，我需要使用 CSS 制作一个重复的六边形图案。如果需要图像，我可以去那里，但如果可能的话，我更愿意只使用 CSS。

这是我正在尝试创建的一个想法:

enter image description here

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

最佳答案

(虽然安娜的回答是在我的几个月之后出现的，可能是用我的作为“思考”的基础，但她能够想出一种使用单个 div 的方法这一事实值得推广，所以 check out her answer too --但请注意，十六进制中的内容更为有限。)

这真是一个了不起的问题。谢谢你的提问。伟大的事情是这样一个事实:

This Fiddle Proves You Can Do It!

Original Fiddle Used (在稍后的编辑中修改为上面的 fiddle 链接)--它使用了 imgur.com 图像，这些图像在加载时似乎不太可靠，因此新 fiddle 使用的是 photobucket.com(让我知道是否存在持续的图像加载问题)。我保留了原始链接，因为下面的解释代码与之相关(在 background-size 或 position 中与新 fiddle 有一些差异)。

阅读您的问题后，我几乎立即想到了这个想法，但需要一些时间来实现。我最初尝试使用单个 div 获取单个“十六进制”和只是伪元素，但据我所知，没有办法只旋转 background-image (我需要)，所以我不得不添加一些额外的 div元素来获取十六进制的右侧/左侧，以便我可以使用伪元素作为 background-image轮换。

我在 IE9、FF 和 Chrome 中进行了测试。理论上任何支持 CSS3 的浏览器 transform它应该工作。

第一次主要更新(添加说明)

我现在有一些时间来发布一些代码解释，所以这里是:

首先，六边形由 30/60 度关系和三 Angular 函数定义，因此这些将是所涉及的关键 Angular 。其次，我们从十六进制网格所在的“行”开始。 HTML 定义为(额外的 div 元素有助于构建十六进制):

<div class="hexrow">
    <div>
        <span>First Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Second Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Third Hex Text</span>
        <div></div>
        <div></div>
    </div>
</div>

我们将使用 inline-block用于六边形display ，但我们不希望它们意外换行到下一行并破坏网格，所以 white-space: nowrap解决了这个问题。 margin这一行将取决于您想要在十六进制之间有多少空间，并且可能需要进行一些实验才能得到您想要的。

.hexrow {
    white-space: nowrap;
    /*right/left margin set at (( width of child div x sin(30) ) / 2) 
    makes a fairly tight fit; 
    a 3px bottom seems to match*/
    margin: 0 25px 3px;
}

使用 .hexrow 的直接子级只是 div元素，我们形成了六 Angular 形的基础。 width将驱动六 Angular 形顶部的水平，height源自该数字，因为在正六边形上所有边的长度相等。同样，边距将取决于间距，但这是各个六边形的“重叠”将发生以使网格看起来发生的地方。 background-image定义一次，就在这里。左移是为了至少容纳十六进制左侧的增加宽度。假设您想要居中文本，text-align处理水平(当然)但 line-height匹配 height将允许垂直居中。

.hexrow > div {
    width: 100px;
    height: 173.2px; /* ( width x cos(30) ) x 2 */
    /* For margin:
    right/left = ( width x sin(30) ) makes no overlap
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
    margin: 0 25px;
    position: relative;
    background-image: url(http://i.imgur.com/w5tV4.jpg);
    background-position: -50px 0; /* -left position -1 x width x sin(30) */
    background-repeat: no-repeat;
    color: #ffffff;
    text-align: center;
    line-height: 173.2px; /*equals height*/
    display: inline-block;
}

我们将相对于“行”向下移动每个奇数十六进制，并向上移动每个偶数。移位计算( width x cos(30)/2 )也与(height/4)相同。

.hexrow > div:nth-child(odd) {
    top: 43.3px; /* ( width x cos(30) / 2 ) */
}

.hexrow > div:nth-child(even) {
    top: -44.8px; /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}

我们正在使用 2 个 child div元素来创建六 Angular 形的“翅膀”。它们的大小与主六 Angular 矩形的大小相同，然后旋转并推到主六 Angular “下方”。 Background-image是继承的，因此图像是相同的(当然)，因为“翅膀”中的图像将与主矩形中的图像“对齐”。伪元素用于生成图像，因为它们需要“重新旋转”回水平(因为我们旋转了它们的父元素 div 以创建“翅膀”)。
:before第一个将转换其背景的宽度等于十六进制的主要部分加上主要十六进制的原始背景偏移的负量的宽度。 :before第二个将改变平移的原点，并将移动 x 轴上的主要宽度和 y 轴上的一半高度。

.hexrow > div > div:first-of-type {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(60deg); /* IE 9 */
    -moz-transform:rotate(60deg); /* Firefox */
    -webkit-transform:rotate(60deg); /* Safari and Chrome */
    -o-transform:rotate(60deg); /* Opera */
    transform:rotate(60deg);
}

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: top left;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    z-index: 1;

    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
    transform:rotate(-60deg) translate(-150px, 0);

    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform-origin: 0 0; /* Opera */
    transform-origin: 0 0;
}

.hexrow > div > div:last-of-type {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(-60deg); /* IE 9 */
    -moz-transform:rotate(-60deg); /* Firefox */
    -webkit-transform:rotate(-60deg); /* Safari and Chrome */
    -o-transform:rotate(-60deg); /* Opera */
    transform:rotate(-60deg);
}

.hexrow > div > div:last-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* starting width + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: top left;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    z-index: 1;

    /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
    -ms-transform:rotate(60deg) translate(100px, 86.6px); /* IE 9 */
    -moz-transform:rotate(60deg) translate(100px, 86.6px); /* Firefox */
    -webkit-transform:rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */
    -o-transform:rotate(60deg) translate(100px, 86.6px); /* Opera */
    transform:rotate(60deg) translate(100px, 86.6px);

    -ms-transform-origin: 100% 0; /* IE 9 */
    -webkit-transform-origin: 100% 0; /* Safari and Chrome */
    -moz-transform-origin: 100% 0; /* Firefox */
    -o-transform-origin: 100% 0; /* Opera */
    transform-origin: 100% 0;
}

此 span容纳您的文本。 line-height被重置以使文本行正常，但 vertical-align: middle工作自 line-height在 parent 身上更大。 white-space被重置，因此它允许再次包装。左/右边距可以设置为负数，以允许文本进入十六进制的“翅膀”。

.hexrow > div > span {
    display: inline-block;
    margin: 0 -30px;
    line-height: 1.1;
    vertical-align: middle;
    white-space: normal;
}

您可以单独定位行和这些行中的单元格以更改图像，或 span文本设置，或不透明度，或容纳更大的图像(将其移动到您想要的位置)等。这就是下面对第二行所做的。

.hexrow:nth-child(2) > div:nth-child(1) {
    background-image: url(http://i.imgur.com/7Un8Y.jpg);
}

.hexrow:nth-child(2) > div:nth-child(1) > span {
    /*change some other settings*/
    margin: 0 -20px;
    color: black;
    font-size: .8em;
    font-weight: bold;
}

.hexrow:nth-child(2) > div:nth-child(2) {
    background-image: url(http://i.imgur.com/jeSPg.jpg);
}

.hexrow:nth-child(2) > div:nth-child(3) {
    background-image: url(http://i.imgur.com/Jwmxm.jpg);
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -150px -120px;
    opacity: .3;
    color: black;
}

.hexrow:nth-child(2) > div:nth-child(3) > div:before {
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -100px -120px; /* the left shift is always less in the pseudo elements by the amount of the base shift */
}

.hexrow:nth-child(2) > div:nth-child(4) {
    background-image: url(http://i.imgur.com/90EkV.jpg);
    background-position: -350px -120px;
}

.hexrow:nth-child(2) > div:nth-child(4) > div:before {
    background-position: -300px -120px;
}

关于html - 使用 CSS3 生成重复的六边形图案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10062887/

上一篇：html - 如何在 Rails 中设置 collection_select 的 HTML 选项？

下一篇：html - HTML/CSS 中的单选/复选框对齐

相关文章：

html - css 中的小箭头按钮

html - 使用 CSS 下拉

javascript - 我的元素甚至在用户点击它触发功能之前就不断显示(点击功能)

jquery - 如何定位多级无序列表中的顶级链接？

html - div 内的内联内容，不换行

用于显示内容的 Php 循环

html - 移动键盘上方的位置元素

css - 是否可以剪切图像的特定部分？

css shape-outside 不工作

html - aria-live、aria-busy、aria-expanded 和 aria-controls 之间的规则是什么？

©2024 IT工具网  联系我们