गतिशील CSS और JS

यह किसी भी नकल नहीं है का उपयोग कर कृपया मेरी मददगतिशील CSS और JS

मैं कुछ चाल यहाँ http://jsfiddle.net/kizu/bhGn4/

मैं CSS साथ गतिशील रूप से यह बनाना चाहते हैं, तो मिल गया षट्भुज डिजाइन तैयार करने के लिए कि कैसे ?

जब भी कोई नई प्रविष्टि स्वचालित रूप से समायोजित करने के लिए डिज़ाइन में जोड़ा जाता है।

मैं खोज करने के लिए कड़ी मेहनत की कोशिश की है और मैं यहाँ पर वृत्त आकार के लिए कुछ मदद मिल

How to create circles around a circle with css, javascript?

ही कुछ षट्भुज के साथ मैं चाहता हूँ

enter image description here

स्रोत

2013-09-25 anytime

का उपयोग करता है, मुझे यकीन नहीं है कि आप डिज़ाइन को कैसे समायोजित करना चाहते हैं। शायद क्रमांकित हेक्सागोन वाले चित्रों का अनुक्रम सहायता का हो सकता है। (उदा: pic1 में 3 हेक्सागोन हैं, pic2 में 4 हेक्सागोन हैं, pic3 में 10 हेक्सागोन हैं) – Tibos

यह पहले से ही यहां उत्तर दिया गया है: http://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3 – Stuart

@ स्टुअर्ट हां मैंने इसे चेक किया लेकिन मैं अलग-अलग दिशा में चाहता हूं क्योंकि आप मेरे प्रश्न की छवि – anytime

इस डेमो के माध्यम से जाओ जो मैं बनाया गया है:

.hexagon { 
 
    width: 100px; 
 
    height: 55px; 
 
    background: red; 
 
    position: absolute; 
 
} 
 
.hexagon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-bottom: 25px solid red; 
 
} 
 
.hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-top: 25px solid red; 
 
} 
 
.hex1 { 
 
    top: 20px; 
 
    left: 0px; 
 
} 
 
.hex2 { 
 
    top: 20px; 
 
    left: 110px; 
 
} 
 
.hex3 { 
 
    top: 20px; 
 
    left: 220px; 
 
} 
 
.hex4 { 
 
    top: 110px; 
 
    left: 55px; 
 
} 
 
.hex5 { 
 
    top: 110px; 
 
    left: 165px; 
 
} 
 
.hex6 { 
 
    top: 110px; 
 
    left: 275px; 
 
}

<div style="position:absolute; top:30px"> 
 
    <div class="hexagon hex1"></div> 
 
    <div class="hexagon hex2"></div> 
 
    <div class="hexagon hex3"></div> 
 
    <div class="hexagon hex4"></div> 
 
    <div class="hexagon hex5"></div> 
 
    <div class="hexagon hex6"></div> 
 
</div>

स्रोत

2013-09-26 12:28:12 Hari

धन्यवाद हरि, अगर मैं एक और दो या तीन आकार जोड़ दूंगा तो उन सभी के लिए सीएसएस बनाने की आवश्यकता है? – anytime

और शानदार कार्य साथी – anytime

आप इस तर्क को गतिशील रूप से पॉप्युलेट करने के लिए Jquery/जावास्क्रिप्ट जोड़ सकते हैं। तो यह जावास्क्रिप्ट गतिशील रूप से लेआउट मैनिपुलेशन करेगा। तो मूल रूप से यह एक प्लगइन की तरह कार्य करेगा। इसलिए ऐसा करने के लिए ऐसे बड़े सीएसएस कोड लिखने की कोई आवश्यकता नहीं है (मान लीजिए कि आपके लेआउट में 1000 हेक्सागोन हैं, यह 1000 अलग-अलग सीएसएस होगा)। – Hari

सीएसएस के साथ षट्भुज आकार बनाने पर यहां एक महान ट्यूटोरियल है। शुरुआत में चरण-दर-चरण मार्गदर्शिका देखें।

Create Hexagon shapes with pure CSS3

इसके अलावा CSSTricks पर इस उदाहरण देखें। आपको इस तरह की समस्याओं से निपटने का विचार मिलेगा।

Shapes of CSS

आशा है कि मदद करता है! :)

स्रोत

2014-01-16 11:52:20 maxxon15

शानदार दोस्त, इसकी अद्भुत –

this CSS hexagon tutorial पर एक नज़र डालें जो वर्णन करता है कि हेक्सागोन आकार कैसे बनाएं और calc() का उपयोग करके उनका आकार बदलने में सक्षम हो।

आपको केवल ऊंचाई के लिए एक मूल्य चाहिए और शेष आपके लिए किया जाता है। यह केवल एक एकल वर्ग

स्रोत

2014-01-26 21:02:28 KennyV

गतिशील CSS और JS

उत्तर

संबंधित मुद्दे