सीएसएस त्रिकोण कस्टम सीमा रंग

Question

मेरे सीएसएस त्रिकोण (सीमा) के लिए एक कस्टम हेक्स रंग का उपयोग करने का प्रयास। हालाँकि जब से यह सीमा गुणों का उपयोग करता है मैं अनिश्चित हूं कि यह कैसे करना है। मैं केवल संगतता के कारण जावास्क्रिप्ट और css3 के बारे में स्पष्ट करना चाहूंगा। मैं कोशिश कर रहा हूं कि त्रिभुज में 1px सीमा (त्रिकोण के कोणों के चारों ओर) रंग # CAD500 के साथ एक सफेद पृष्ठभूमि हो। क्या यह संभव है? यहाँ मेरे पास अभी तक क्या है:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}​

मेरी बेला: http://jsfiddle.net/4ZeCz/

Answer 1

आपको वास्तव में इसे दो त्रिकोणों के साथ नकली करना होगा ...।

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

अपडेटेड फ़िडल यहां

Comments

यह बिल्कुल सही है! वास्तव में मुझे क्या चाहिए। धन्यवाद।

— एड आर

हे, मैं नहीं समझता कि मैं बॉक्स के दूसरी तरफ दिखने वाले त्रिकोण को कैसे संशोधित करूंगा (मुझे समझ में नहीं आता कि त्रिकोण सीएसएस कैसे काम करता है)

— केविन

SMRT - आप बहुत स्मार्ट हैं!

— कोड व्हिस्परर

नोट, @ केविन के रूप में एक ही सवाल के साथ लोगों के लिए। border-colorविशेषता को देखो , रंगीन सीमा के आधार पर त्रिकोण अलग-अलग दिशा में इंगित करेगा। बाईं परिवर्तन बात करने के लिए तीर चालू करने के लिए border-colorकरने के लिए transparent #e3f5ff transparent transparent;दोनों में, .container:afterऔर.container:before

— rmagnum2002

@ इसके लिए धन्यवाद! आपका जेएस फिडल हाजिर था! हालाँकि, JSField के बाहर कोपिपस्टा के बारे में सावधान रहें, इसने मेरी CSS फ़ाइल में दो अदृश्य और अमान्य वर्ण जोड़े जो उस css फ़ाइल में सत्यापन / पार्स त्रुटियों का कारण बने। एक बार जब मैंने अदृश्य पात्रों को हटा दिया (वर्ण शून्य चौड़ाई के थे, इसलिए कर्सर उन्हें नहीं दिखा रहा था, लेकिन मैं बैकस्पेस में सक्षम था) यह आश्चर्यजनक रूप से था। यह आपका कोड नहीं था जो समस्या थी, मुझे लगता है कि जेएस फिडल ने कुछ रहस्यमय पात्रों को प्रदर्शित कोड में पेश किया? डननो, लेकिन मैं सिर्फ पोस्टरिटी खातिर इसका जिक्र करना चाहता था, अगर किसी के पास भी इस मुद्दे पर बात आती।

— हाइपरविजर 666

Answer 2

मुझे पता है कि आप इसे स्वीकार करते हैं, लेकिन कम सीएसएस के साथ यह भी जांचें:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/

Comments

हे, मैं नहीं समझता कि मैं बॉक्स के दूसरी तरफ दिखने वाले त्रिकोण को कैसे संशोधित करूंगा (मुझे समझ में नहीं आता कि त्रिकोण सीएसएस कैसे काम करता है)

— केविन

@ केविन मैं इसे बनाता हूं कृपया jsfiddle.net/4ZeCz/97 चेक करें । उन गुणों के साथ खेलने का प्रयास करें जिनका मेरे पास उपयोग है और यदि आपके पास कोई प्रश्न है तो आप मुझसे पूछ सकते हैं :)

— sandeep

एक स्पष्टीकरण: यह दो आसन्न पक्षों पर सीमाओं के साथ एक सामान्य वर्ग तत्व बनाता है, एक झुका हुआ त्रिकोण बनाता है। फिर वर्ग 45 डिग्री झुका हुआ है, इसलिए त्रिकोण इंगित करता है (या जहां आप चाहते हैं)। वैसे, आपको केवल -webkit-उपसर्ग की आवश्यकता है (और -ms-IE9 के लिए)। अन्य सभी ब्राउज़र इसे उपसर्ग का समर्थन करते हैं।

— rvighne

बहुत चतुर समाधान! धन्यवाद।

— सोलह

Answer 3

मुझे लगता है कि यह क्लिप-पाथ का उपयोग करने वाला एक सरल है :

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}

<div class="container">
test content
</div>

Answer 4

इसे पूरा करने का एक और तरीका है, विशेष रूप से किसी ऐसे व्यक्ति के लिए जिसे मुझे समान या समान स्केल त्रिकोण के साथ काम करने की आवश्यकता है, इसका उपयोग filter: drop-shadow(...)कई मानों और धब्बा त्रिज्या के साथ करना है। इसके कई तत्वों की आवश्यकता नहीं होने का अतिरिक्त लाभ है, या दोनों तक पहुंच : पहले और: बाद में (मैं इस के साथ इसे पूरा करने की कोशिश कर रहा था: सामग्री के बाद जो इनलाइन था, इसलिए पूर्ण स्थिति से भी बचना चाहता था)।

उपरोक्त मामले के लिए: सीएसएस के बाद इस तरह दिख सकता है ( फिडल ):

.container {
  margin-left: 15px;
  width: 200px;
  background: #FFFFFF;
  border: 1px solid #CAD5E0;
  padding: 4px;
  position: relative;
  min-height: 200px;
}
.container:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}

<div class="container">
  Test Container
</div>

मुझे लगता है कि कुछ सीमाएँ या विचित्रताएँ हैं, हालाँकि:

• IE11 में कोई समर्थन नहीं (हालांकि एफएफ, क्रोम और एज में ठीक लगता है)
• मुझे यकीन नहीं है कि .5px <offset-y>दूसरे ड्रॉप- शैड में मान के लिए क्यों है (ऊपर) 1px से अधिक 1px की तरह प्रतीत होता है, हालांकि मुझे लगता है कि यह त्रिकोणमिति से संबंधित है (हालांकि कम से कम मेरे मॉनिटर पर मुझे इसके बीच कोई अंतर नहीं दिखता है) वास्तविक ट्रिगर-आधारित मान या .5px या सम। 1px उस बात के लिए)।
• 1px से अधिक सीमाएँ (ठीक है, उनकी उपस्थिति इस तरह) अच्छी तरह से काम नहीं करती है। या कम से कम मुझे समाधान नहीं मिला है, हालांकि थोड़ा बड़ा होने के लिए कम-से-इष्टतम तरीके के लिए नीचे देखें। (मुझे लगता है कि दस्तावेज़-पर-असमर्थित 4th पैरामीटर ( <spread-radius>) ऑफ़ ड्रॉप-शैडो) वह हो सकता है जो मैं वास्तव में एकाधिक फ़िल्टर मानों के बजाय देख रहा हूं, लेकिन इसे पूरी तरह से तोड़ दी गई चीजों में जोड़ना।) यहां आप देख सकते हैं कि क्या है। 1px ( बेला ) से आगे जाने पर होने लगती है :

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}

<div class="container">
  Test Container
</div>

फ़ननेस पर ध्यान दें कि पहले वाला (हरा) एक बार लगाया जाता है, लेकिन दूसरा वाला (लाल) दोनों को बॉर्डर के साथ-साथ ग्रीन ड्रॉप-शैडो (), और आखिरी वाले (नीले) के साथ बनाए गए पीले त्रिकोण पर लागू किया जा रहा है उपरोक्त सभी के लिए लागू हो जाता है। (शायद यह भी .5px उपस्थिति बात से संबंधित है)।

लेकिन मुझे लगता है कि आप एक-दूसरे पर इन ड्रॉप-शैडो बिल्डिंग का लाभ उठा सकते हैं, अगर आपको 1px की तुलना में कुछ व्यापक दिखने की ज़रूरत है, तो उन्हें निम्न ( फ़ेडल ) जैसी चीज़ में बदलकर :

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

जहां पहले वाले के पास एक धब्बा-त्रिज्या सेट है (इस मामले में 2.5px, हालांकि परिणाम कई गुना दिखाई देता है), और बाकी सभी में 0. पर धब्बा है, लेकिन यह केवल सभी पक्षों पर एक ही रंग के लिए काम करेगा, और यह परिणाम देता है कुछ गोल-गोल कोनों में और साथ ही साथ जितने बड़े किनारों पर आप जाते हैं।

Answer 5

.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}