सीएसएस

Question

का उपयोग कर एक लचीला, अंतरिक्ष भरने वाला मधुमक्खी बनाना, मैं जिस नेटवर्क पर काम कर रहा हूं उसके लिए मैं कुछ प्रकार का ताप मानचित्र बनाने की कोशिश कर रहा हूं। मैं इसके लिए एक मधुमक्खी का उपयोग करना चाहता था क्योंकि यह फैंसी दिखता है और मुझे महान अंतरिक्ष उपयोग देता है।

यदि यह वेबसाइट मिली है तो मुझे पता चला कि शुद्ध सीएसएस के साथ हेक्सगोन का उपयोग कैसे किया जाए। लेकिन यह भारी निर्भर पंक्तियों और ऑफसेट्स था। मेरा पूरा यूआई नॉकआउट जेएस संचालित है और किसी भी समय नेटवर्क पर गतिशील संख्या में पीसी है। (ज्यादातर डॉकर कंटेनर ऊपर या नीचे जा रहे हैं)।

क्लस्टर 1 और एन + 1 नोड्स के बीच भिन्न हो सकते हैं।

मैंने इस वेबसाइट को देखा: CSS Hexagon और हेक्सगोन प्रबंधित करने के लिए कई समाधान पाए गए लेकिन उनमें से सभी वास्तव में उनके गतिशील उपयोग में सीमित हैं।

इस उद्देश्य कोड है:

<div class="panel-body> 
     {{noescape "<!-- ko foreach: { data: vm.dash().nodes, as: 'node' } -->" }} 
      <span class="flex-span" data-bind="attr: { 'id': node.id }, css: { up: node.Status == 2, down: node.Status != 2 }">&#x2B22;</span> 
     {{noescape "<!-- /ko -->"}} 
</div> 

के आधार पर है कि यह षट्भुज एक रंग है कि/नीचे

अप का संकेत होगा मैं अपने flexbox विचार के साथ एक गैर नॉकआउट बेला ऊपर मार पड़ी किया है देना होगा , लेकिन मैं वास्तव में flexbox समझ में नहीं आता है कि अच्छी तरह से तो यह स्पष्ट रूप से काम नहीं कर रहा: Fiddle

#container { 
 
    max-width:400px; 
 
    max-height:400px; 
 
} 
 

 
.hex:before { 
 
    content: " "; 
 
    width: 0; height: 0; 
 
    border-bottom: 30px solid #6C6; 
 
    border-left: 52px solid transparent; 
 
    border-right: 52px solid transparent; 
 
    position: absolute; 
 
    top: -30px; 
 
    flex-shrink: 1; 
 
    flex-grow:1; 
 
    flex-basis: 130px; 
 
} 
 

 
.hex { 
 
    margin-top: 30px; 
 
    width: 104px; 
 
    height: 60px; 
 
    background-color: #6C6; 
 
    position: relative; 
 
    float:left; 
 
    margin-bottom:30px; 
 
    flex-shrink: 1; 
 
    flex-grow:1; 
 
    flex-basis: 130px; 
 
} 
 

 
.hex:after { 
 
    content: ""; 
 
    width: 0; 
 
    position: absolute; 
 
    bottom: -30px; 
 
    border-top: 30px solid #6C6; 
 
    border-left: 52px solid transparent; 
 
    border-right: 52px solid transparent; 
 
    flex-shrink: 1; 
 
    flex-grow:1; 
 
    flex-basis: 130px; 
 
}

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

समस्याओं मैं में चल रहा हूँ कर रहे हैं:

1. मैं इन divs कैसे पैमाने करते गतिशील संख्या की परवाह किए बिना, और अधिकतम अंतरिक्ष कब्जे।
2. मैं यह सुनिश्चित करने के लिए शुद्ध सीएसएस समाधान का उपयोग कैसे करूं कि सभी "पंक्तियां" आधे हेक्सागोन से ऑफसेट हो जाएं।

!! अद्यतन करें !!

तो मैं पूर्व निर्धारित पंक्तियों की अवधारणा को जोड़ दिया है: fiddle मैं अभी भी एक तरह से पंक्ति ऑफसेट बनाने के लिए की तलाश में हूँ "हेक्स" वर्ग चौड़ाई पर निर्भर हैं। और तत्वों की मात्रा के साथ हेक्स वर्ग पैमाने है। लेकिन मुझे लगता है कि ग्रिड अब वास्तव में अच्छा दिखता है।

Answer 1

तो अगर आप प्रति पंक्ति 3 hexagons की जरूरत है: n वें वाले बच्चे एक बार हर 2 पंक्तियाँ मार्जिन सेट करने के लिए कर सकते हैं।

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

उदाहरण:

#container { 
 
    max-width: 400px; 
 
    max-height: 400px; 
 
    border: solid;padding:1px; 
 
} 
 
/* demo*/ 
 
#container:hover { 
 

 
    max-width: 600px; 
 
    max-height: 600px; 
 
}/* */ 
 
.hex { 
 
    margin-top: 8%; 
 
    width: 28%; 
 
    padding: 8% 0; 
 
    background-color: #6C6; 
 
    position: relative; 
 
    margin-bottom: 3px; 
 
    margin-right: 0px; 
 
    display: inline-flex; 
 
    position: relative; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.hex:after, 
 
.hex:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0%; 
 
    background: inherit; 
 
    transform: rotate(60deg); 
 
} 
 
.hex:after { 
 
    transform: rotate(-60deg) 
 
} 
 
.hex:nth-child(6n+1) { 
 
    margin-left: 14%; 
 
}

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

Answer 2

मुझे नहीं लगता है कि यह एक फ्लेक्स कंटेनर पंक्ति संख्या (यहां तक ​​कि/विषम) के आधार पर में एक शैली लागू करने के लिए posible है है।

इसलिए, मैंने उसी पंक्ति में हेक्सागोन ओवरलैपिंग सेट की है, और यह सुनिश्चित किया है कि एक पंक्ति में हमेशा हेक्सागोन की संख्या भी होगी (यहां तक ​​कि नकारात्मक मार्जिन के कारण भी अंतरिक्ष आवश्यकता नहीं है, इसलिए वे हमेशा फिट होगा)।

यहाँ मेरी समाधान है। चौड़ाई बदलने के लिए कंटेनर पर होवर करें।

#container { 
 
    max-width: 410px; 
 
    max-height: 400px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    border: solid 1px green; 
 
    transition: max-width 6s; 
 
} 
 
#container:hover { 
 
    max-width: 800px; 
 
} 
 
.hex { 
 
    margin-top: 30px; 
 
    height: 60px; 
 
    background-color: #6C6; 
 
    position: relative; 
 
    margin-bottom: 90px; 
 
    flex-shrink: 0; 
 
    flex-grow: 0; 
 
    flex-basis: 104px; 
 
} 
 
.hex:nth-child(even) { 
 
    background-color: blue; 
 
    transform: translateY(90px); 
 
    margin-left: -52px; 
 
    margin-right: -52px; 
 
} 
 
.hex:before { 
 
    content: " "; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 30px solid #6c6; 
 
    border-left: 52px solid transparent; 
 
    border-right: 52px solid transparent; 
 
    position: absolute; 
 
    top: -30px; 
 
    flex-shrink: 1; 
 
    flex-grow: 1; 
 
    flex-basis: 130px; 
 
} 
 
.hex:after { 
 
    content: ""; 
 
    width: 0; 
 
    position: absolute; 
 
    bottom: -30px; 
 
    border-top: 30px solid #6c6; 
 
    border-left: 52px solid transparent; 
 
    border-right: 52px solid transparent; 
 
    flex-shrink: 1; 
 
    flex-grow: 1; 
 
    flex-basis: 130px; 
 
} 
 
.hex:nth-child(even):before { 
 
    border-bottom-color: blue; 
 
} 
 
.hex:nth-child(even):after { 
 
    border-top-color: blue; 
 
}

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