सीएसएस सीमा बैठक बिंदु

मैं आशा करता हूं किसी को एक सीएसएस समस्या के साथ मेरी मदद कर सकते हैं ...सीएसएस सीमा बैठक बिंदु

मैं कुछ परिणामों को प्रदर्शित करने सूचीदृश्य उपयोग कर रहा हूँ, वहाँ इस मैं हूँ प्राप्त करने के लिए समूह की एक अवधारणा का होना आवश्यक है, समूहों के बीच वैकल्पिक 2 पृष्ठभूमि रंगों का उपयोग करना। मैं इन तत्वों के लिए सीमा जोड़ने की कोशिश कर रहा हूं, लेकिन सीमावर्ती और सीमा-बाएं अलग-अलग रंग हो सकते हैं, क्या त्रिकोण को हटाने का कोई तरीका है जहां वे मिलते हैं?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p 
{ 
border-top:10px solid red; 
border-left:10px solid white; 
border-bottom-style:dotted; 
border-left-style:solid; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

स्रोत

2012-06-26 Ketchup

आप हमें आप इस से क्या मतलब का एक उदाहरण दिखा सकते हैं? – jaypeagi

कोनों को कोण पर मिलते हैं, यदि बाएं सीमा लाल है, और शीर्ष सीमा सफेद है, तो मुझे लाल तीर से छोड़ा गया है, जहां से लाल सीमा सफेद सीमा से मिल रही है – Ketchup

आप इस प्रकार लिख सकते हैं:

p{ 
    width:200px; 
    height:200px; 
    background:red; 
    border-left:5px solid pink; 
    -moz-box-shadow:inset 0 5px green; 
    box-shadow:inset 0 5px green; 
}

चेक इस http://jsfiddle.net/nRWux/1/

बॉक्स shaow नीचे IE8 & में काम नहीं।

स्रोत

2012-06-26 11:46:23 sandeep

धन्यवाद, पूरी तरह से काम करता है :) – Ketchup

यह है बढ़िया है, लेकिन अभी भी बहुत नीचे, थोड़ा पारदर्शी सीमा पर सीमा पार करने की थोड़ी सी मात्रा है। ज्यादातर मामलों में कोई समस्या नहीं है, लेकिन यदि आपको पिक्सेल-परिपूर्ण होने की आवश्यकता है तो एक अलग समाधान शायद बेहतर होगा। – basicallydan

नहीं, त्रिकोण को हटाने के लिए संभव नहीं है, जहां वे मिलते हैं। सीमाओं को इस तरह कार्यान्वित किया जाता है और इसके आसपास कोई रास्ता नहीं है।

स्रोत

2012-06-26 11:44:34

आप अपने उदाहरण में, बॉर्डर-शीर्ष के लिए बॉक्स-छाया का उपयोग कर सकते

: http://jsfiddle.net/C7jnJ/

margin-top:10px; 
box-shadow:0 -10px 0 10px red;

के बजाय बॉर्डर-शीर्ष। मार्जिन टॉप कहा, क्योंकि छाया 'पी' के बाहर प्रदर्शित कर रहा है है कि आप इसे अंदर चाहते हैं, तो यह होगा: pseudo से पहले: http://jsfiddle.net/C7jnJ/1/

box-shadow:inset 0px 10px 0px red;

स्रोत

2012-06-26 11:57:27 Alvaro

यह भी काम करता है, लेकिन मैंने @ सैंडिप्स समाधान – Ketchup

यहाँ एक समाधान IE8 का उपयोग कर + के साथ संगत है

फिडल http://jsfiddle.net/PhilippeVay/hXrW5/

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p { 
    position: relative; 
    border-top:10px solid red; 
    border-bottom-style:dotted; 
    border-left-style:none; 
} 
p:before { 
    content: ''; 
    display: block; 
    width: 10px; 
    position: absolute; 
    top: -10px; /* top: 0; if you want red over blue (top over left) */ 
    bottom: 0; 
    background: blue; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

स्रोत

2012-06-26 11:59:41 FelipeAls

ग्रेट सॉल्यूशन @ फ़ेलिपअल्स का उपयोग किया! धन्यवाद ;) – Dan

सीएसएस सीमा बैठक बिंदु

उत्तर

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