CSS3 के साथ हेक्सागोनल पैटर्न को दोहराते हुए उत्पन्न करें

Question 1

इसलिए, मुझे CSS का उपयोग करके एक दोहराए जाने वाले हेक्सागोनल पैटर्न बनाने की आवश्यकता है। यदि छवियों की आवश्यकता है, तो मैं वहां जा सकता हूं, लेकिन यदि संभव हो तो मैं सीएसएस का उपयोग करना पसंद करूंगा।

यहाँ एक विचार है कि मैं क्या बनाने की कोशिश कर रहा हूँ:

यहाँ छवि विवरण दर्ज करें

मूल रूप से, मुझे बस हेक्सागोनल आकार बनाने का एक तरीका चाहिए, और फिर उनके ऊपर पाठ / चित्र ओवरले करें। मेरे पास अभी ज्यादा कोड नहीं है, क्योंकि मुझे यकीन नहीं है कि कहां से शुरू करना है। समस्या यह है, मैं सिर्फ <div>एक षट्भुज के आकार में एस का उपयोग कर सकता हूं जैसे कि (में दिखाया गया है) http://css-tricks.com/examples/ShapesOfCSS/ ) , लेकिन तब वे कनेक्ट नहीं होंगे। मैं एक दोहराते हुए षट्भुज पैटर्न का उपयोग कर सकता था, लेकिन फिर मैं विशिष्ट आकार में आवश्यक पाठ या छवियों के सटीक स्थान को निर्दिष्ट करने में सक्षम नहीं था। किसी भी सहायता के लिए अग्रिम धन्यवाद।

Question 2

(हालांकि एना का जवाब मेरे बाद के महीनों में आया, शायद मेरा "आधार से सोचने के लिए" के रूप में उपयोग करते हुए, यह तथ्य कि वह एकल divका उपयोग करने के लिए एक विधि के साथ आने में सक्षम था , इसलिए उसका उत्तर भी देखें - लेकिन ध्यान दें कि हेक्स में सामग्री अधिक सीमित है।)

यह वास्तव में आश्चर्यजनक प्रश्न था। यह पूछने के लिए धन्यवाद। बड़ी बात यह है कि:

यह फिडेल प्रूव्स यू कैन डू इट!

ऑरिजनल फिडल प्रयुक्त (बाद में फिडेल लिंक में ऊपर संपादित करें संशोधित) - इसमें imgur.com चित्रों का उपयोग किया गया था, जो लोडिंग में बहुत विश्वसनीय नहीं लग रहे थे, इसलिए नई फ़िडल photobucket.com का उपयोग कर रहा है ( मुझे पता है कि क्या लगातार है छवि लोड हो रहा है मुद्दों )। मैंने मूल लिंक को रखा है क्योंकि नीचे दिया गया स्पष्टीकरण कोड उसी के साथ जाता है ( नई फ़िडल में background-sizeया इसमें कुछ अंतर हैं position)।

आपके प्रश्न को पढ़ने के तुरंत बाद यह विचार मेरे पास आया, लेकिन इसे लागू करने में कुछ समय लगा। मैंने मूल रूप से एक एकल divऔर सिर्फ छद्म तत्वों के साथ एक "हेक्स" प्राप्त करने की कोशिश की , लेकिन सबसे अच्छा जैसा कि मैं बता सकता था, बस background-image(जिसे मुझे ज़रूरत थी) को घुमाने का कोई रास्ता नहीं था , इसलिए मुझे अधिकार प्राप्त करने के लिए कुछ अतिरिक्त divतत्वों को जोड़ना पड़ा / हेक्स के बाईं ओर, ताकि मैं तब background-imageरोटेशन के साधन के रूप में छद्म तत्वों का उपयोग कर सकूं ।

मैंने IE9, FF और क्रोम में परीक्षण किया। सैद्धांतिक रूप से CSS3 का समर्थन करने वाले किसी भी ब्राउज़र को transformइसमें काम करना चाहिए।

पहला मुख्य अद्यतन (जोड़ा स्पष्टीकरण)

मेरे पास कुछ कोड स्पष्टीकरण पोस्ट करने के लिए अभी कुछ समय है, इसलिए यहाँ जाता है:

सबसे पहले, हेक्सागोन्स को 30/60 डिग्री संबंधों और त्रिकोणमिति द्वारा परिभाषित किया जाता है, इसलिए वे मुख्य कोण होंगे। दूसरा, हम हेक्स ग्रिड में निवास करने के लिए "पंक्ति" से शुरू करते हैं। एचटीएमएल को परिभाषित किया जाता है (अतिरिक्त 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तत्व हैं, हम हेक्स आकार के लिए आधार बनाते हैं। 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;
}

प्रत्येक विषम संख्या हेक्स हम "पंक्ति" के संबंध में नीचे शिफ्ट करने जा रहे हैं और प्रत्येक भी ऊपर की ओर। शिफ्ट गणना (चौड़ाई x cos (30) / 2) भी (ऊंचाई / 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 बाल तत्वों का उपयोग कर रहे हैं । वे मुख्य हेक्स आयत के आकार के समान होते हैं, और फिर घुमाया जाता है, और मुख्य हेक्स के नीचे "नीचे" धकेल दिया जाता है। Background-imageविरासत में मिला है ताकि छवि एक ही हो (बेशक), क्योंकि "पंख" में छवि मुख्य आयत में "पंक्तिबद्ध" होने जा रही है। छद्म तत्वों का उपयोग छवियों को उत्पन्न करने के लिए किया जाता है, क्योंकि उन्हें क्षैतिज रूप से "फिर से विभाजित" करने की आवश्यकता होती है (क्योंकि हमने div"पंख" बनाने के लिए उनके माता-पिता को घुमाया था )।

सबसे :beforeपहले अपनी पृष्ठभूमि का अनुवाद हेक्स के मुख्य भाग के बराबर नकारात्मक राशि की चौड़ाई और मुख्य xx की मूल पृष्ठभूमि बदलाव के रूप में करेगा। :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माता पिता पर बड़ा था। यह 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;
}

Question 3

यह वास्तव में पृष्ठभूमि छवि और पाठ के लिए हेक्सागोन और छद्म तत्वों के प्रति केवल एक तत्व के साथ किया जा सकता है।

डेमो

मूल 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>

आपके पास अधिक पंक्तियाँ हो सकती हैं, आपको बस nविषम पंक्तियों पर हेक्सागोन की आवश्यकता होती है औरn+/-1 यहां तक कि पंक्तियों पर हेक्सागोन भी।

प्रासंगिक सीएसएस :

* { 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); 
}

Question 4

मैं हेक्सागोनल आकार बनाने का एक सरल डेमो प्रदान करूंगा।

.hex {
  width: 40px;
  height: 70px;
  margin: 20px;
  overflow: hidden;
}

.hex:before {
  content: "";
  transform: rotate(45deg);
  background: #f00;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px -5px 10px -5px;
}

<div class="hex">
</div>

स्निपेट का विस्तार करें

Question 5

यहाँ COMPASS / SCSS का उपयोग करने का एक और तरीका है, जो हेक्सागोन्स के आकार और लेआउट को आसानी से सेट करने की अनुमति देता है:

http://codepen.io/interdruper/pen/GrBEk

Question 6

आप केवल CSS का उपयोग करके पूरी तरह उत्तरदायी हेक्सागोनल ग्रिड बना सकते हैं। विचार CSS2.1 अतिप्रवाह का उपयोग करके एक मुखौटा के रूप में एक मूल आकार बनाने के लिए है: छिपा हुआ है जो लगभग सभी ब्राउज़रों, यहां तक कि इंटरनेट एक्सप्लोरर 6 के साथ संगत है।

यह आश्चर्यजनक रूप से सरल तकनीक है जिसका उपयोग सभी प्रकार की आकृतियों के उत्तरदायी ग्रिड बनाने के लिए किया जा सकता है, बस समस्या को हल करने के लिए बॉक्स के बाहर सोचने की आवश्यकता होती है।

मेरे पास इस तकनीक को करने के तरीके के बारे में एक विस्तृत कदम है: https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids

यह सबसे अच्छा तरीका है जो मैंने अब तक पाया है, किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है और यह तरल और उत्तरदायी दोनों है।

मैंने एक निशुल्क HTML टेम्प्लेट में तकनीक का भी उपयोग किया था जिसमें हेक्सागोन्स के अंदर की छवियां शामिल हैं, जिन्हें आप यहां डेमो कर सकते हैं और डाउनलोड कर सकते हैं: https://www.codesmite.com/freebie/hexa-free-responsive-portfolio-template

Question 7

यदि आप div आकृतियों की चाल को कार्यान्वित करने में सक्षम हैं, तो बस प्रत्येक div a position:relative(आपको शुरू में उन सभी को एक-एक करके पहले से ही निर्धारित करना होगा, topऔर साथ ही left)

Question 8

AFAIK, शुद्ध CSS में करने का कोई तरीका नहीं है। आपकी सबसे अच्छी शर्त पृष्ठभूमि के लिए मास्किंग क्लिपिंग का उपयोग करना होगा जैसा कि यहाँ बताया गया है: http://www.cssbakery.com/2009/06/background-image.html (यह केवल तभी काम करेगा जब आपका पृष्ठ पृष्ठभूमि ठोस रंग का हो या आप फिट हो सकते हैं और पृष्ठ की पृष्ठभूमि से मिलान करने के लिए अपने मास्क को रखें।

तब आप पाठ में फिट होने के लिए csstextwrap का उपयोग कर सकते हैं: http://www.csstextwrap.com/examples.php

एसओ पर इसी तरह के सवालों का एक समूह था। उदाहरण के लिए किसी भी तरह से div में एक त्रिकोण आकार भरने पाठ है?