एक और div के शीर्ष-सही कोण में त्रिकोण आकार बनाने के लिए कैसे सीमा

Question

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

मैं इस तस्वीर पर की तरह त्रिकोण आकार बनाया, और मार्जिन को शीर्ष दाएं कोण में सेट करने के लिए सेट करें, लेकिन मुझे नहीं पता कि यह तस्वीर पर दिखाए गए बाएं div से विभाजित कैसे दिखता है।

क्या मुझे भूरे रंग की सीमा को बनाए रखने के लिए बाएं div को "कट" करना है और हरे रंग के त्रिभुज से विभाजित होना है?

क्या कोई विचार है कि यह कैसे करें?

संपादित करें:

1. मैं पृष्ठ पर निश्चित नेविगेशन पट्टी का उपयोग कर रहा है, इसलिए जब मैं स्क्रॉल अगर div स्थिति है: पूर्ण, नेविगेशन पट्टी div के पीछे चला जाता है। हरे रंग त्रिकोण और div के बाकी के बीच
2. अंतरिक्ष पारदर्शी होना चाहिए, क्योंकि मैं पृष्ठ पृष्ठभूमि के रूप में छवि का उपयोग कर रहा

Answer 1

मेरा सुझाव चाहते हैं, निम्नलिखित मार्क-छोड़ दिया:

<div id="box"></div> 

सीएसएस :

#box { 
    width: 10em; 
    height: 6em; 
    border: 4px solid #ccc; 
    background-color: #fff; 
    position: relative; 
} 

#box::before, 
#box::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-color: transparent; 
    border-style: solid; 
} 

#box::before { 
    border-width: 1.5em; 
    border-right-color: #ccc; 
    border-top-color: #ccc; 
} 

#box::after { 
    border-radius: 0.4em; 
    border-width: 1.35em; 
    border-right-color: #0c0; 
    border-top-color: #0c0; 
} 

JS Fiddle demo।

Answer 2

स्थिति के साथ एक कंटेनर div के भीतर दो बिल्कुल स्थित divs रखें। फिर बाहरी त्रिभुज के साथ त्रिकोण को आंतरिक त्रिकोण से थोड़ा बड़ा बनाते हैं। फिर इन तत्वों को कंटेनर के ऊपरी दाएं कोने में रखें।

एचटीएमएल

<div class="container"> 
    <div class="inner-triangle"></div> 
    <div class="outer-triangle"></div> 
</div> 

सीएसएस

.container{ 
    border: 2px solid gray; 
    position: relative; 
    height: 100px; 
} 

.inner-triangle{ 
    border-left: 20px solid transparent; 
    border-right: 20px solid green; 
    border-bottom: 20px solid transparent; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: 0px; 
    z-index: 2; 
} 

.outer-triangle{ 
    border-left: 22px solid transparent; 
    border-right: 22px solid gray; 
    border-bottom: 22px solid transparent; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: 0px; 
    z-index: 1; 
} 

जे एस फिडल:http://jsfiddle.net/u8euZ/1

Answer 3

आप पारे पर एक overflow:hidden के संयोजन के रूप में एक घुमाएं छद्म तत्व इस्तेमाल कर सकते हैं NT।

यहां से आप position:absolute का उपयोग कर छद्म को शीर्ष दाएं स्थान पर रख सकते हैं और आपको जाने के लिए अच्छा होना चाहिए!

div { 
 
    height: 250px; 
 
    width: 300px; 
 
    background: lightgray; 
 
    border-radius: 10px; 
 
    border: 5px solid dimgray; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 30px auto; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -60px; 
 
    right: -60px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: green; 
 
    border: 5px solid dimgray; 
 
    transform: rotate(45deg); 
 
} 
 

 
/***********FOR DEMO ONLY*******************/ 
 

 

 
html, body { 
 
    margin:0; 
 
    padding:0;height:100%; 
 
    vertical-align:top;overflow:hidden; 
 
    background: rgb(79, 79, 79); 
 
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1))); 
 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1); 
 
}

<div></div>