CSS त्रिभुज - सीएसएस-ट्रिक्स

एचटीएमएल

आप उन्हें एक ही डिव से बना सकते हैं। प्रत्येक दिशा की संभावना के लिए कक्षाएं लगाना अच्छा है।

सीएसएस

विचार एक बॉक्स है जिसमें शून्य चौड़ाई और ऊंचाई है। तीर की वास्तविक चौड़ाई और ऊंचाई सीमा की चौड़ाई से निर्धारित होती है। ऊपर के तीर में, उदाहरण के लिए, नीचे की सीमा रंगीन है जबकि बाएं और दाएं पारदर्शी हैं, जो त्रिभुज बनाता है।

.arrow-up ( width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; ) .arrow-down ( width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; ) .arrow-right ( width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; ) .arrow-left ( width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; )