दिलचस्प पोस्ट
मेरी स्थिर फाइलों को एक्सेस करने के लिए मुझे http। StripPrefix का उपयोग करने की आवश्यकता क्यों है? डेटा फ़्रेम के साथ एक आर सूची में किसी Excel कार्यपुस्तिका में सभी कार्यपत्रकों को पढ़ें सामान्य विधि के लिए GetMethod जब छोटी हो तो UIScrollView की केंद्र सामग्री स्थिर टाइप और गतिशील टाइप किए गए भाषाओं में अंतर क्या है? अनेक छवियां चुनें (UIImagePickerController या Photos.app साझा यूआई) Std :: vector बनाम std :: list बनाम std :: slist का सापेक्ष प्रदर्शन बंद वर्कबुक से मूल्य प्राप्त करने के लिए ExecuteExcel4Macro क्यों strsplit सकारात्मक lookahead का उपयोग करता है और देखने के लिए अलग पहचान मैच अलग? केंद्र में "x" के साथ लापता टाइल के साथ नक्शादृश्य प्रस्तुत करना यूनिट परीक्षण के लिए विजुअल स्टूडियो 2008 के टेस्ट प्रोजेक्ट्स बनाम एनयूआईआईटी? ASP.NET MVC हैंडलएअरर वसंत: हम इंटरफ़ेस को क्यों संचालित करते हैं और लागू क्लास नहीं करते? कोड का निष्पादन समय मापना कैसे बाश में लाइन से दो फाइलों लाइन को मर्ज करने के लिए

सीएसएस – केवल कोने सीमा दिखाएं

मैं सोच रहा हूं कि सीएसएस या जेक्फरी में सीमारेखा बनाना संभव है, लेकिन केवल कोने के लिए। कुछ इस तरह:

**** **** * * * * CONTENT * * * * **** **** 

वेब के समाधान से एकत्रित समाधान "सीएसएस – केवल कोने सीमा दिखाएं"

मैं अतिव्यापी divs का प्रयोग करेंगे

एक वर्ग के कोनों के साथ और गोल कोने के साथ दूसरे (इसलिए यह पहले के कोनों को नहीं छुपाता है)।

 <div id="div1" /> <div id="div2" /> #div1 { position:absolute; top:9px; left:9px; height:100px; width:100px; background-color:white; border:1px solid black; } #div2 { position:relative; top:-1px; left:-1px; height:102px; width:102px; background-color:white; border-radius: 15px; } 

http://jsfiddle.net/y3EfP/

परिणाम:

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


@ वेब-टिकी द्वारा प्रदान किया गया एक बढ़ाया समाधान:

http://jsfiddle.net/webtiki/y3EfP/147/

मान लें <div id="content">CONTENT</div> और उस CONTENT में कम से कम एक HTML नोड शामिल हैं

 #content {position:relative} #content:before, #content:after, #content>:first-child:before, #content>:first-child:after { position:absolute; content:' '; width:80px; height: 80px; border-color:red; /* or whatever colour */ border-style:solid; /* or whatever style */ } #content:before {top:0;left:0;border-width: 1px 0 0 1px} #content:after {top:0;right:0;border-width: 1px 1px 0 0} #content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0} #content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px} 

यहाँ एक बेल्ट है

एसवीजी

यह एक बढ़िया विकल्प है यदि अब आप महान प्रतिक्रिया के लिए अनुमति देने के लिए वैक्टर का उपयोग करना शुरू करना चाहते हैं।

 <svg viewBox="0 0 100 100" width="50px"> <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" /> <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" /> <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" /> <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" /> </svg> 

कोई अतिरिक्त छद्म / वास्तविक तत्वों का उपयोग किए बिना इस प्रभाव को बनाने के लिए यहां कुछ तरीके हैं एक बात ध्यान देने योग्य है कि ये दोनों दृष्टिकोण केवल आधुनिक ब्राउज़रों में काम करेंगे क्योंकि वे CSS3 के गुणों का उपयोग करते हैं।

border-image का उपयोग करना : border-image संपत्ति इस तरह के प्रभावों को बनाने में आसान बनाता है। दृष्टिकोण इस प्रकार है:

  • एक पारदर्शी छवि बनाएं, जिसमें सीमाएं हैं, जैसे कोने में।
  • इस छवि को border-image-source रूप में सेट करें और ब्राउज़र को बाकी की देखभाल करें 🙂 चूंकि border-image-repeat लिए डिफ़ॉल्ट मान stretch , ब्राउज़र कंटेनर के लिए फिट होने के लिए मूल छवि को फैलता है भले ही कंटेनर बन जाता है विशाल।
  • border-image-width संपत्ति के लिए सेट मान निर्धारित करता है कि सीमाएं कितनी मोटी हैं
 .bordered { background-color: beige; border-image-source: url("http://i.stack.imgur.com/s2CAw.png"); border-image-slice: 1; border-image-width: 5px; } .square { height: 150px; width: 150px; } .large-square { height: 350px; width: 350px; } /* Just for demo */ div { margin-bottom: 10px; } 
 <div class='bordered square'></div> <div class='bordered large-square'></div> 

आप पूरी तरह से चार <div> s, प्रत्येक कोने में एक, उचित दो सीमाओं के साथ प्रत्येक स्थिति में हो सकता है

एचटीएमएल

 <div class="corners"> <div class="top left"></div> <div class="top right"></div> <div class="bottom right"></div> <div class="bottom left"></div> content goes here </div> 

सीएसएस

 .corners { position: relative; width: 100px; /* for demo purposes */ padding: 10px; } .top, .bottom { position: absolute; width: 10px; height: 10px; } .top { top: 0; border-top: 1px solid; } .bottom { bottom: 0; border-bottom: 1px solid; } .left { left: 0; border-left: 1px solid; } .right { right: 0; border-right: 1px solid; } 

क्लिप-पथ

एक दूसरे के ऊपर दो डिवा का उपयोग करना
और एक क्लिप-पथ को div करने के लिए जोड़ते हुए कि पीठ में आप प्रभाव की तरह एक सीमा बना सकते हैं

 .wrapper { display: inline-block; background-color: black; line-height: 0px; -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%); clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%); } .wrapper {} .wrapper div { display: inline-block; height: 150px; width: 150px; margin: 10px; background-color: white; } 
 <div class="wrapper"> <div></div> </div> 

मुझे यह सवाल मिला, लेकिन मैं सीमा-त्रिज्या दृष्टिकोण से संतुष्ट नहीं था: जैसा कि मैं अधिक मोटी सीमाओं का उपयोग कर रहा था, प्रभाव उतना अच्छा नहीं था जितना मैं चाहता था। मैं एक और समाधान बनाने में कामयाब रहा, छवियों के बिना, और बिना किसी अतिरिक्त मार्कअप के लिए:

  .box { /* fake border */ position: relative; overflow: hidden; box-shadow: inset 0px 0px 0px 10px green; padding: 1em; } .box:before { /* this element will hide the fake border on the top and bottom */ content:''; display: block; position: absolute; border-top:10px solid white; border-bottom:10px solid white; /* height = border-width x2 */ height:calc(100% - 20px); top:0; /* width = size of fake-border x2 */ width: calc(100% - 36px); /* left = size of fake-border */ left:18px; } .box:after { /* this element will hide the fake border on the left and right */ /* the rules for width, heigth, top and left will be the opposite of the former element */ display: block; position: absolute; content:''; border-right:10px solid white; border-left:10px solid white; height:calc(100% - 36px); width: calc(100% - 20px); top:18px; left: 0; } 

इस उदाहरण के साथ यहां एक जेएसएफडियल है: https://jsfiddle.net/t6dbmq3e/ उम्मीद है कि यह मदद करता है

कोनों को सीधा सीमा देने के लिए कोई साफ सीएसएस तरीका नहीं है, लेकिन आप प्रभाव को नकल करने का प्रयास कर सकते हैं शायद ऐसा कुछ: http://jsfiddle.net/RLG4z/

 <div id="corners"> <div id="content"> content </div> </div> #corners { width: 200px; height: 50px; border-radius: 10px; background-color: red; margin: 10px; } #content { background-color: white; border-radius: 15px; height: 30px; padding: 10px; } 

सीमा त्रिज्या में अंतर के कारण, अंतर्निहित डिवीजन का पृष्ठभूमि का रंग गर्त दिखाता है, जिससे कोनों पर सीमा का प्रभाव पड़ता है।

निजी तौर पर मुझे लगता है कि मैं पृष्ठभूमि छवियों के साथ काम करूँगा, परिणाम हासिल करने के लिए बेहतर नियंत्रण के लिए।

यहाँ कुछ ऐसा है जो मैंने हाल ही में सामग्री के साथ ऊर्ध्वाधर और क्षैतिज दोनों को केंद्रित किया था।

एचटीएमएल

 <div class="column"> <div class="c-frame-wrapper"> <div class="c-frame-tl"></div> <div class="c-frame-tr"></div> <div class="c-frame-br"></div> <div class="c-frame-bl"></div> <div class="c-frame-content"> &copy; Copyright 2015 - Company name<br /><br /> St Winifrids St,<br /> The Saints, Harrogate HG1 5PZ, UK<br /> </div> </div> </div> 

सीएसएस

 .c-frame-wrapper { width: 250px; height: 100px; font-size:11px; color: $dark-grey-lighten-70; /* center align x axis */ right: auto; left: 50%; transform: translateX(-50%); } .c-frame-tl { top: 0; left: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: solid none none solid; border-color: #eb0000; } .c-frame-tr { top: 0; right: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: solid solid none none; border-color: #eb0000; } .c-frame-br { bottom: 0; right: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: none solid solid none; border-color: #eb0000; } .c-frame-bl { bottom: 0; left: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: none none solid solid; border-color: #eb0000; } .c-frame-content { width:100%; text-align: center; /*center alignment x and y*/ position: absolute; top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%,-50%); } 

JSFiddle

ठीक है जैसे मैं सीएसएस में चूसता हूँ, मुझे लगता है कि मैं इसे खुद नहीं कर पाऊंगा, लेकिन मैं ऐसा करता हूं और यह काम लगता है:

 <div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div> <div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div> 

और यह काम करने लगता है 😉 परेशान करने के लिए क्षमा करें और आपकी मदद के लिए धन्यवाद

यह आपकी तस्वीर है:

HTML:

 <div class="shell"> <div class="top"> <div class="clear"> <div class="left"> &#42;&#42;&#42;&#42; </div> <div class="right"> &#42;&#42;&#42;&#42; </div> </div> <div class="clear"> <div class="left"> &#42; </div> <div class="right"> &#42; </div> </div> <div class="clear"> <div class="left"> &#42; </div> <div class="right"> &#42; </div> </div> </div> <div class="content"> <p>CONTENT</p> </div> <div class="bottom"> <div class="clear"> <div class="left"> &#42; </div> <div class="right"> &#42; </div> </div> <div class="clear"> <div class="left"> &#42; </div> <div class="right"> &#42; </div> </div> <div class="clear"> <div class="left"> &#42;&#42;&#42;&#42; </div> <div class="right"> &#42;&#42;&#42;&#42; </div> </div> </div> 

और सीएसएस:

 .shell { width: 200px;} .left{ float:left; } .right{float:right; } .clear { clear: both; line-height: 10px; } .content { line-height: 10px; text-align: center; } 

यहां ऊपर दिए गए उत्तर का एक संशोधित संस्करण है, इस संस्करण में माता-पिता और पूर्ण स्थिति वाला बच्चा है, इसलिए हम होवर प्रभाव पर जोड़ सकते हैं।

http://jsfiddle.net/3jo5btxd/

 HTML: <div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div> CSS: #div1 { position: relative; height: 100px; width: 100px; background-color: white; border: 1px solid transparent; } #div2 { position: absolute; top: -2px; left: -2px; height: 84px; width: 84px; background-color: #FFF; border-radius: 15px; padding: 10px; } #div1:hover { border: 1px solid red; } 

मुझे लगता है कि सबसे अच्छा समाधान छद्म तत्व विधि है अच्छा और साफ है और एचटीएमएल (बहुत अधिक) अतिरिक्त तत्वों के साथ प्रदूषित नहीं करता है।

कॉपी और पेस्ट समाधान के लिए, मैं उपरोक्त कोड का उपयोग करके इस सॉस मिश्रण को बनाया है:

 @mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) { position: relative; border: $corner-width solid $color-border; background-color: $color-background; &::before { content: ""; z-index: 0; position: absolute; top: -$corner-width; bottom: -$corner-width; left: $corner-size; right: $corner-size; background-color: $color-background; } &::after { content: ""; z-index: 0; position: absolute; top: $corner-size; bottom: $corner-size; left: -$corner-width; right: -$corner-width; background-color: $color-background; } } 

तो आप इसे इस तरह से उपयोग कर सकते हैं:

एचटीएमएल:

 <div class="border"> <div class="content"> Content </div> </div> 

एससीएसएस

 .border { @include corner-borders; } .content { position: relative; z-index: 1; } 

आपको ज़ेड-इंडेक्स और सापेक्ष स्थिति की जरूरत है, इसलिए सामग्री छद्म तत्वों के ऊपर बैठती है।

मैंने यहां एक कोडन डेमो बनाया: http://codepen.io/timrross/pen/XMwVbV