Bu yüzden, tekrar altıgen bir desen yapmak için CSS kullanmaya ihtiyacım var. Eğer görüntüleri gerekiyorsa, oraya giderim, ama sadece mümkünse CSS kullanmayı tercih ediyorum.

Burada oluşturmaya çalıştığım bir fikir:

Temelde, ben sadece altıgen şekiller oluşturmak için bir yol gerekir, ve sonra yerleşimi metin/bunların üzerine görüntüleri. Nereden başlasam emin değilim çünkü çok kod henüz yok. Sorun, sadece (http://css-tricks.com/examples/ShapesOfCSS/) gösterildiği gibi altıgen şeklinde<div> s kullanabilirim, ama sonra bağlanma olmaz. Tekrar altıgen bir kalıp kullanabilirim, ama sonra metnin tam yerini ya da belirli şekiller ihtiyacım var resimler belirtmek mümkün olmaz. Önceden herhangi bir yardım için teşekkürler.

(Gerçi Ana'nın cevap geldi ay sonra benimki, muhtemelen kullanarak benim gibi bir temel "düşünme", aslında o bunu başardı ama bir yöntem kullanarak bir tek div değer teşvik, bu yüzden check out her answer tooama unutmayın içeriğinde hex daha sınırlı.)

Bu gerçekten şaşırtıcı bir soruydu. Sorduğun için teşekkür ederim. Büyük bir şey aslında

This Fiddle Proves You Can Do It!

Yeni keman photobucket.com kullanıyor çok yükleniyor çok güvenilir olduğu görünen değildi imgur.com görüntüleri kullanılmıştır Original Fiddle Used (daha sonra keman yukarıdaki bağlantıyı Düzenle modifiye)--(eğer kalıcı görüntü yükleme sorunları varsa, bana bildirin). Açıklama aşağıdaki kod ile (yeni keman background-size position az fark vardır) gider çünkü orijinal link tuttum.

Fikri sorunuzu okuduktan sonra bana hemen geldi, ama biraz zaman uygulamaya aldı. Ben aslında denedim bir tek "hex" ile bir tek div ve sadece sözde elemanları, ama elimden geldiğince söyle, hiçbir şekilde sadece döndürün background-image (gerekli), çok işim vardı da eklemek fazladan div öğeleri almak için sol/sağ tarafın hex, böylece ben de sonradan kullanmak pseudo öğeleri olarak background-image dönme.

9, FF, ve Krom test ettim. Teorik olarak CSS3 transform destekleyen herhangi bir tarayıcıda çalışması lazım.

İlk Ana Güncelleme (ek açıklama)

İşte bu yüzden bazı kod açıklama sonrası için biraz zaman şimdi var:

İlk olarak, altıgen 30/60 derece ilişkiler ve trigonometri ile tanımlanır, bu anahtar açıları dahil olacak. İkinci olarak, başlayalım bir "satır" bulunması için hex kılavuz için. HTML olarak tanımlanan (div ekstra öğeleri hex oluşturmanıza yardımcı)

<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>

Biz kullanacak inline-block hexagon display ama biz istemiyoruz bunları yanlışlıkla sarmak için sonraki satır ve berbat kılavuz, bu yüzden white-space: nowrap çözer bu sorunu. Bu satırda margin hex ve bazı deneyler istediğini elde etmek için gerekli olabilir arasında istediğiniz nasıl bağlı olacak.

.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;
}

Sadece div elementler .hexrow hemen çocukları kullanarak, altıgen şekli için temel oluşturuyoruz. width hex üst yatay sürücü, height Her Taraf düzenli bir altıgen eşit uzunlukta olduğundan bu sayı türetilir. Yine, kenar boşlukları bağlı olacak, ama burada "" bireysel altıgen ızgara görünüm ortaya yapmak için ortaya gidiyor. üst üste background-image bir zamanlar, burada tanımlanır. Vardiya hex sol taraf için en azından ekledi genişliğini karşılamak için gitti. Ortalanmış metin, text-align istediğiniz varsayarak yatay işleme (elbette) ama height uyan line-height bir dikey ortalama için izin verecek.

.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;
}

Hergaripilgili olarak aşağı değiştireceğiz sayı hex "satır" ve herbileYukarı kayması. Shift hesaplama ( genişlik x cos(30) / 2 ) de aynı (yükseklik / 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)) */
}

div 2 alt öğeleri "" hex. kanatları oluşturmak için kullanıyoruz Ana hex dikdörtgen olarak aynı boy ve sonra da döndürülmüş ve "" ana hex. aşağıya itti Background-image "kanat"" bunu asıl dikdörtgenin içinde. "kaplı olacak bu resim çünkü resim aynı (tabii ki) devralındı Pseudo elementler gerekir, çünkü görüntüler oluşturmak için kullanılan, "" geri yatay bunların div üst oluşturmak için döndürülmüş beri ("kanat"). rerotated

İlk :before arkaplanı olumsuz miktarı hex ana bölümü için eşit artı ana hex orijinal arka plan kayması genişliği çevirecektir. İkinci :before çeviri başlangıç noktası değişecek ve x ekseni ve y ekseni üzerinde yarım boy ana genişliği kaydır.

.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 bu metin evler. line-height metin satırları normal yapmak için sıfırlanır, ama line-height beri vertical-align: middle işleri üst büyüktü. white-space sargıyı tekrar imkanı sıfırlandı. Sol/sağ kenar negatif metin "" hex. kanatları girmek için izin vermek için ayarlanabilir

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

Sana tek bir hedef satır ve hücreleri satırları değiştirin görüntüleri, veya span metin ayarları, ya da donukluk, ya da karşılamak daha büyük bir görüntü (shift için yer ister), vb. Aşağıdaki ikinci satır için ne olduğunu.

.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;
}