कैसे एक div टैग

Question

मैं एक div टैग है से अधिक की सीमा त्रिकोण को जोड़ने के लिए,

__________ 
|   |  
|   |  
|   |  
|__________| 

मैं इसे ऊपर एक छोटे त्रिकोण जोड़ना चाहते हैं।

_______/\_ 
|   |  
|   |  
|   |  
|__________| 

नोट: मैं अपने div टैग को कुछ रंग की सीमा और दूसरे के div शरीर के साथ चाहता हूं। कहो, मेरी div पृष्ठभूमि सफेद हो जाएगी और सीमा नीली होनी चाहिए। कृपया इसे देखें। http://fiddle.jshell.net/pausP/

Answer 1

http://cssarrowplease.com/ पर सूचक और छाया के साथ प्रारंभिक बॉक्स का उपयोग करके आप आकार आप चाहते बनाने के लिए उन्हें restyle कर सकते हैं:

.arrow_box { 
    top:40px; 
    position: relative; 
    background: #ffffff; 
    border: 1px solid #719ECE; /*set border colour here*/ 
    width: 200px; 
    height: 200px; 
    border-radius: 3px; 
    -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8)); /*set shadow colour and size here*/ 
    -moz-box-shadow: 0 1px 10px rgba(113, 158, 206,0.8); 
    filter: drop-shadow(0 1px 10px rgba(113, 158, 206,0.8)); 
} 
.arrow_box:after, 
.arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #ffffff; 
    border-width: 19px; 
    left: 50%; 
    margin-left: -19px; 
} 
.arrow_box:before { 
    border-color: rgba(113, 158, 206, 0); 
    border-bottom-color: #719ECE; 
    border-width: 20px; 
    left: 50%; 
    margin-left: -20px; 
} 

http://fiddle.jshell.net/pausP/3/

आपके ऐरो आगे सही बढ़ने की जरूरत है, तो बस खेलते हैं left.arrow_box:after और .arrow_box:before

Answer 2

आप ग्राफ़िक्स संपादक में त्रिकोण छवि बना सकते हैं तो एक निश्चित DIV और सेटिंग टॉप और वाम समन्वय करता है पूर्ण स्थिति से समन्वय करने के लिए एक DIV में उस छवि को रख दिया और फिर उस DIV तैरने लगते हैं।

Answer 3

सबसे पहले आपको एक छवि बनाने की ज़रूरत है \ \ साथ कि आप सीमा रंग चाहते हैं और फिर उस .png को सहेज लें छवि अपना पसंदीदा स्थान तो स्थिति यह है कि छवि के लिए सीएसएस कोड को स्थानांतरित और इतने निम्न कोड का उपयोग करें:

पृष्ठभूमि छवि: यूआरएल (छवियों/triangle_img.png); पृष्ठभूमि-दोहराना: दोहराना नहीं; पृष्ठभूमि-स्थिति: शीर्ष;

और इस कोड को आपके निर्दिष्ट div शैलियों के साथ जोड़ना। और मैं केवल विभाजन सीमा के साथ त्रिकोण आकार सीमा रखने के लिए कोड दे रहा हूं

Answer 4

http://fiddle.jshell.net/pausP/3/ से ऊपर "पीट" का उत्तर अच्छी तरह से दिखाएं कि यह कैसे करें, यह देखने के लिए पैरामीटर के साथ थोड़ा सा खेलें कि चीजें कैसे काम करती हैं। और उन लोगों के लिए जो इसे अच्छी तरह से प्राप्त नहीं करते हैं, यह इस लेख को कैसे पढ़ता है जो दर्शाता है कि त्रिकोण कैसे बनाते हैं, सीमाओं से (मेरा मतलब सिद्धांत है)। https://css-tricks.com/snippets/css/css-triangle ।

फिर यह पहले और बाद में उपयोग करने के लिए है, ठीक है, हम केवल एक ही निर्भर कर सकते हैं जो हम चाहते हैं, वास्तव में नीली त्रिभुज बनाने के लिए उपयोग किया जाता है और एक सफेद त्रिकोण के बाद वे एक दूसरे से ऊपर उभरे होते हैं त्रिभुज में उस सीमा को रखने के लिए 1px diff, लेकिन यदि आवश्यक नहीं है तो आप उदाहरण के लिए पहले उपयोग करें। (आप यह देखने के लिए थोड़ा पहले से मार्जिन बदल सकते हैं कि यह कैसा है)। हॉप कि मददगार था।