那些遇到过的问题

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

ele*_*119 78 html css css3 css-shapes

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

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

在此输入图像描述

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

Sco*_*ttS 130

(虽然Ana的回答是在我的几个月之后发布的,可能是以我的为基础来"思考",她能够想出一种使用单一方法的事实div值得推广,所以也请查看她的答案 -但请注意,十六进制中的内容更受限制.)

这是一个非常了不起的问题.谢谢你提问.最棒的是:

这个小提琴证明你可以做到!

使用的原始小提琴(在后面的编辑中修改为上面的小提琴链接) - 它使用了imgur.com图像,这在加载时似乎不是非常可靠,所以新的小提琴使用photobucket.com(让我知道是否有持久性图像加载问题).我已经把原来的链接,因为解释下面的代码与去(也有在几个不同background-size或position新的小提琴).

在阅读完问题之后,这个想法几乎立刻就出现了,但是花了一些时间来实现.我最初尝试使用单个div且只是伪元素获得单个"十六进制" ,但是我能说的最好,没有办法只旋转background-image(我需要),所以我必须添加一些额外的div元素来获得正确的/ hex的左侧,这样我就可以使用伪元素作为background-image旋转方式.

我在IE9,FF和Chrome中测试过.从理论上讲,任何支持CSS3的浏览器transform都应该可以使用.

第一次主要更新(补充说明)

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

首先,六边形由30/60度关系和三角学定义,因此这些将是所涉及的关键角度.其次,我们从十六进制网格的"行"开始.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>
Run Code Online (Sandbox Code Playgroud)

我们将使用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;
}
Run Code Online (Sandbox Code Playgroud)

使用.hexrow其中只是div元素的直接子元素,我们形成了十六进制形状的基础.所述width将驱动十六进制的顶部的水平时,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;
}
Run Code Online (Sandbox Code Playgroud)

每个奇数十六进制我们将相对于"行"向下移动,每个甚至向上移动.移位计算(宽度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)) */
}
Run Code Online (Sandbox Code Playgroud)

我们使用2个子div元素来创建十六进制的"翅膀".它们的大小与主要的六角形矩形相同,然后旋转,并推到主十六进制"下方".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;
}
Run Code Online (Sandbox Code Playgroud)

这里span有你的文字.该line-height是复位,使文本行正常,但vertical-align: middle因为作品line-height是在父较大.该white-space复位,所以它允许重新包装.左/右边距可以设置为负,以允许文本进入十六进制的"翅膀".

.hexrow > div > span {
    display: inline-block;
    margin: 0 -30px;
    line-height: 1.1;
    vertical-align: middle;
    white-space: normal;
}
Run Code Online (Sandbox Code Playgroud)

您可以在这些行中单独定位行和单元格以更改图像,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;
}
Run Code Online (Sandbox Code Playgroud)

Ana*_*Ana 52

它实际上可以通过每个六边形只有一个元素和背景图像和文本的伪元素来完成.

演示

基本的HTML结构:

<div class='row'>
    <div class='hexagon'></div>
</div>
<div class='row'>
    <div class='hexagon content ribbon' data-content='This is a test!!! 
    9/10'></div><!--
    --><div class='hexagon content longtext' data-content='Some longer text here.
       Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>
Run Code Online (Sandbox Code Playgroud)

您可以拥有更多行,您只需要n在奇数行上使用六边形,在偶数行上使用n+/-1六边形.

相关CSS:

* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.5% 0; text-align: center; }
.row:first-child { margin-top: 7%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 8.5%;
    padding: 16%;
    transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before, .content:after {
    display: block;
    position: absolute;
    /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleX(1.155) /* 1.155 = 2/sqrt(3) */ 
               skewY(-30deg) rotate(-30deg);
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.content:after { content: attr(data-content); }
/* add background images to :before pseudo-elements */
.row:nth-child(n) .hexagon:nth-child(m):before {
    background-image: 
        url(background-image-mxn.jpg); 
}
Run Code Online (Sandbox Code Playgroud)

  • 这真的值得更多的赞成!所以简洁,简洁,演示真正展示了多功能性.唯一的缺点可能是内容存储在属性中而不是元素本身中. (5认同)
  • 你是对的,基本上只需要用`.hexagon>*`替换`.content:after`.巧妙. (2认同)

归档时间：

查看次数：

29589 次

最近记录：

7 年，9 月 前
响应网格的六边形 34
更多相关链接
相关归档
使用空href创建<a>链接的最佳方法 36
使用CSS的软边缘？ 26
表格验证; 获取所有"输入类型=文本"并验证？ 20
使用JavaScript启用阻止文本选择 20
是否有可能使"HTML to speech"与"Text to speech"相同？ 19
<thead>的好处是什么？ 17
如何在JavaScript或jQuery中查找父元素宽度？ 16
使用比边界尺寸大得多的CSS边界半径 7
如何相对于鼠标位置旋转图像？ 6
text-shadow(和其他css3)导致滚动滞后 5
难疑归档
是否可以将CSS应用于角色的一半？ 2717
可以(a == 1 && a == 2 && a == 3)评估为真吗？ 2438
**(双星/星号)和*(星号/星号)对参数有什么作用？ 2149
如何使用Git将标签推送到远程存储库？ 2091
O(log n)究竟意味着什么？ 2021
如何在jQuery中选择具有多个类的元素？ 1985
如何在Bash中的分隔符上拆分字符串？ 1885
将(移动)子目录分离到单独的Git存储库中 1712
在Visual Studio中使用Git 1452
JavaScript中是否有"null coalescing"运算符？ 1305