दिलचस्प पोस्ट
क्या कोई मान एक संख्या, स्ट्रिंग या बुल है, यह निर्दिष्ट करने के लिए एक माइक्रोडाटा टैग है? क्या आपके रेल एप्लिकेशन में सभी मॉडलों का संग्रह प्राप्त करने का कोई तरीका है? सी ++ में बड़ी संख्या में हैंडलिंग? लिनक्स में स्थानीय फ़ंक्शन कॉल्स का पता लगाने के लिए उपकरण यदि कोई चयनकर्ता रिक्त करता है तो मुझे कैसे पता लगा सकता है? यूआरआई से पूर्ण फ़ाइल पथ कैसे प्राप्त करें Ruby 1.9.3 के साथ रूबी-डीबग? निष्पादक.न्यूकैचड थ्रेडपूल () बनाम निष्पादक। एनवेफिक्सट्रेडपूल () कास्ट या कन्वर्ट का उपयोग कब करें एकाधिक डोमेन के साथ प्रवेश नियंत्रण-अनुमति-उत्पत्ति कोडिंग कन्वेंशन – एनमन नामकरण पथ से फ़ाइल नाम निकालने के लिए कैसे? LinkedHashMap को छंटनी JavaFX 2.1: टूलकिट को आरम्भ नहीं किया गया क्या "और एस " एक std :: स्ट्रिंग में निकटवर्ती अक्षरों को इंगित करता है?

सीएसएस का प्रयोग करके घुमावदार किनारे षट्भुज कैसे बनायें

यह मेरा सीएसएस है

सीएसएस

#hexagon-circle { width: 100px; height: 55px; background: red; position: relative; border-radius: 10px;} #hexagon-circle:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 29px solid red; border-radius: 10px;} #hexagon-circle:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 29px solid red; border-radius: 10px;} 

उत्पादन हेक्सागन के 4 किनारों घुमावदार है, लेकिन ऊपर और नीचे नहीं है। मैं षट्भुज के सभी किनारों को घुमावदार बनाना चाहता हूं। शीर्ष और नीचे के किनारों को घुमाने के लिए कैसे करें? या त्रिकोण के शीर्ष किनारे को घुमावदार बनाने के लिए कैसे?

http://jsfiddle.net/yR7zt/ 1

वेब के समाधान से एकत्रित समाधान "सीएसएस का प्रयोग करके घुमावदार किनारे षट्भुज कैसे बनायें"

मुझे लगता है कि आप इस के लिए देख रहे हैं।

सीएसएस

 .hex { position: relative; margin: 1em auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; background: orange; transition: opacity .5s; } .hex:before, .hex:after { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ''; } .hex:before { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg);/*Added for IE9*/ transform: rotate(60deg); } .hex:after { -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg);/*Added for IE9*/ transform: rotate(-60deg); } 

बेला

एक प्रश्न पूछने से पहले कृपया कुछ समय पहले थोड़ा सा खोजें। कोई अपराध नहीं 🙂

मैं समझता हूं कि यह एक बहुत पुराना सवाल है, लेकिन मुझे लगता है कि यह कैसे काम करता है इसके बारे में अधिक दिखाने के लिए मैं एक जवाब जोड़ूंगा।

तो, सबसे पहले, हमें पृष्ठ पर एक एकल तत्व बनाने की आवश्यकता है। मैं height:300px; width:180px; आकार के लिए चला गया height:300px; width:180px; height:300px; width:180px; और 10px की एक सीमा त्रिज्या। सिर्फ इसलिए कि मैं संख्या के गोलाकार को पसंद करता हूं (पल को माफ कर) इस तत्व को एक position:relative; देते हुए position:relative; इसका अर्थ है कि हम इस div के संबंध में सभी शब्दों को absolute लिपि में रख सकते हैं।

फिर हमें दो छद्म तत्वों को बनाने की जरूरत है, माता-पिता के समान ऊंचाई और चौड़ाई के साथ।

क्योंकि छद्म तत्व वास्तव में हैं, छद्म तत्व, हमें एक content: जोड़ने की आवश्यकता content: उनके लिए। और क्योंकि हम माता-पिता के भीतर सामान डाल सकते हैं, हमें इनकी वास्तव में आवश्यकता नहीं है, इसलिए उन्हें ""; सेट करें "";

यह हम हमें वर्तमान में आयताकार के बजाय षट्भुज बनाने के तरीके की ओर ले जाता है। ऐसा करने के लिए, षट्कोण के दूसरे पक्षों को उत्पन्न करने के लिए हमें रोटेशन को शामिल करना होगा। वहाँ 6 पक्षों के साथ, और 360 को जोड़ने के लिए आवश्यक कोणों, हम 60 डिग्री से छद्म तत्व में से एक को घुमा सकते हैं दूसरा हम -60 डिग्री (या 300 डिग्री, यदि आप चाहें) से घूमते हैं।

यह हमारे 'हेक्सागोन' के साथ हमें छोड़ देता है जिसमें हम कुछ अच्छे स्टाइल जोड़ सकते हैं और एनिमेशन की आवश्यकता के रूप में होवर कर सकते हैं:

 .roundHex { position: relative; margin: 0 auto; background: rgba(0, 0, 0, 0.2); border-radius: 10px; height: 300px; width: 180px; transition: all 1s; line-height:300px; text-align:center; color:white; font-size:20px; } .roundHex:before, .roundHex:after { content: ""; position: absolute; top: 0; left: 0; background: inherit; border-radius: inherit; height: 100%; width: 100%; z-index:-1; } .roundHex:before { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg); transition: all 1s 0.5s; } .roundHex:after { -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); transform: rotate(-60deg); transition: all 1s 1s; } .roundHex:hover { background: tomato; } 
 <div class="roundHex">HOVER ME</div> 

इस तरह से प्रयास करें: (क्रोम में काम करता है और 10 यानी)

 <br><br><br> <div id="hexagon-circle"></div> <style> #hexagon-circle { position: relative; margin: 1em auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; opacity: .25; background: orange; transition: opacity .5s; cursor: pointer; } #hexagon-circle:before, #hexagon-circle:after { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ''; } #hexagon-circle:before { transform: rotate(60deg); -ms-transform:rotate(60deg); /* IE 9 */ -webkit-transform:rotate(60deg); /* Opera, Chrome, and Safari */ } #hexagon-circle:after { transform: rotate(-60deg); -ms-transform:rotate(-60deg); /* IE 9 */ -webkit-transform:rotate(-60deg); /* Opera, Chrome, and Safari */ } </style> 

आप इस दृष्टिकोण की कोशिश कर सकते हैं:

सीएसएस

 #hexagon-circle { position: relative; margin: 1em auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; background: red; transition: opacity .5s; cursor: pointer;} #hexagon-circle:before { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ''; -webkit-transform: rotate(60deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(60deg); /* IE 9 */ transform: rotate(60deg);} /* Firefox 16+, IE 10+, Opera */ #hexagon-circle:after { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ''; -webkit-transform: rotate(-60deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(-60deg); /* IE 9 */ transform: rotate(-60deg);} /* Firefox 16+, IE 10+, Opera */ 

डेमो

http://jsfiddle.net/yR7zt/4/

अपने वर्तमान कोड के साथ, त्रिकोण को ऊपर और नीचे का उपयोग करते हुए, आप उसे एक घुमावदार रूप देने के लिए थोड़ा संशोधित कर सकते हैं। #hexagon-circle:before लिए 4px चौड़ाई जोड़ें #hexagon-circle:before और #hexagon-circle:after 2px प्रत्येक के #hexagon-circle:after border-left और border-right को कम करें और कम करें

जेएस फ्रेडल यहाँ

 #hexagon-circle { width: 100px; height: 55px; background: red; position: relative; border-radius: 10px; } #hexagon-circle:before { content: ""; position: absolute; top: -25px; left: 0; width: 4px; height: 0; border-left: 48px solid transparent; border-right: 48px solid transparent; border-bottom: 29px solid red; border-radius: 10px; } #hexagon-circle:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 4px; height: 0; border-left: 48px solid transparent; border-right: 48px solid transparent; border-top: 29px solid red; border-radius: 10px; } 

यह एक सच्ची वक्र नहीं है क्योंकि यह एक सीधी रेखा बनाता है, हालांकि यह प्रभाव देता है, जब यह आकार के संदर्भ में देखा जा सकता है।