CSS त्रिकोण जनरेटर - Border Trick से CSS त्रिकोण बनाएं ऑनलाइन
Border trick और clip-path polygon के साथ लाइव प्रीव्यू के साथ CSS त्रिकोण बनाएं। 8 दिशाएं, 3 त्रिकोण प्रकार, कई आउटपुट प्रारूप — 100% क्लाइंट-साइड।
अक्सर पूछे जाने वाले प्रश्न
CSS त्रिकोण क्या है और यह कैसे काम करता है?
CSS त्रिकोण छवियों या SVG के बिना शुद्ध CSS से बनाई गई त्रिकोणीय आकृति है। सबसे आम तकनीक "बॉर्डर ट्रिक" का उपयोग करती है: जब किसी तत्व की चौड़ाई और ऊंचाई शून्य होती है, तो उसके बॉर्डर विकर्ण सीम पर मिलते हैं। चार में से तीन बॉर्डर को पारदर्शी बनाकर और एक को रंग देकर, दृश्य बॉर्डर त्रिकोण आकार बनाता है।
मैं इस CSS त्रिकोण जनरेटर का उपयोग कैसे करूं?
1. दिशा पैड का उपयोग करके त्रिकोण दिशा चुनें। 2. त्रिकोण प्रकार चुनें: समभुज, समद्विबाहु या विषमबाहु। 3. स्लाइडर या संख्यात्मक इनपुट से चौड़ाई और ऊंचाई समायोजित करें। 4. रंग चुनें। 5. पूर्वावलोकन में वास्तविक समय में अपडेट देखें। 6. एक क्लिक में CSS कोड कॉपी करें।
क्या मेरा डेटा सुरक्षित है?
हां, आपका डेटा पूरी तरह सुरक्षित है। यह उपकरण पूरी तरह से आपके ब्राउज़र में क्लाइंट-साइड JavaScript का उपयोग करके चलता है। कोई भी डेटा सर्वर को नहीं भेजा जाता है।
Border trick और clip-path विधियों में क्या अंतर है?
Border trick शून्य-चौड़ाई/ऊंचाई तत्व बनाता है और बॉर्डर से त्रिकोण बनाता है। उत्कृष्ट ब्राउज़र समर्थन है लेकिन box-shadow नहीं लगा सकते। Clip-path विधि clip-path: polygon() से सामान्य तत्व को त्रिकोण में काटती है, पृष्ठभूमि और छाया की अनुमति देती है।
CSS त्रिकोण कब उपयोग करना चाहिए?
CSS त्रिकोण आमतौर पर इनके लिए उपयोग किए जाते हैं: टूलटिप तीर, ड्रॉपडाउन मेनू संकेतक, ब्रेडक्रम्ब सेपरेटर, एकॉर्डियन संकेतक, स्पीच बबल पूंछ, और सजावटी सेक्शन डिवाइडर।
मेरे CSS त्रिकोण में box-shadow क्यों नहीं जोड़ सकता?
Border-trick त्रिकोण शून्य-चौड़ाई, शून्य-ऊंचाई तत्व हैं। box-shadow तत्व के बॉक्स पर लागू होता है जिसका कोई क्षेत्र नहीं है। इसके बजाय clip-path विधि या filter: drop-shadow() का उपयोग करें।
समभुज, समद्विबाहु और विषमबाहु त्रिकोण क्या हैं?
समभुज त्रिकोण की तीनों भुजाएं बराबर और सभी कोण 60° होते हैं। समद्विबाहु की दो भुजाएं बराबर होती हैं। विषमबाहु की तीनों भुजाएं अलग-अलग होती हैं।
कोड उदाहरण
// CSS Triangle Generator - JavaScript Implementation
// Generate CSS triangle using the border trick
function generateTriangleCSS(direction, width, height, color) {
const styles = { width: '0', height: '0' };
const halfWidth = width / 2;
const halfHeight = height / 2;
switch (direction) {
case 'up':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-bottom'] = `${height}px solid ${color}`;
break;
case 'down':
styles['border-left'] = `${halfWidth}px solid transparent`;
styles['border-right'] = `${halfWidth}px solid transparent`;
styles['border-top'] = `${height}px solid ${color}`;
break;
case 'left':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-right'] = `${width}px solid ${color}`;
break;
case 'right':
styles['border-top'] = `${halfHeight}px solid transparent`;
styles['border-bottom'] = `${halfHeight}px solid transparent`;
styles['border-left'] = `${width}px solid ${color}`;
break;
}
return Object.entries(styles)
.map(([prop, value]) => `${prop}: ${value};`)
.join('\n');
}
// Generate clip-path polygon
function generateClipPath(direction, width, height, color) {
const points = {
up: '50% 0%, 100% 100%, 0% 100%',
down: '0% 0%, 100% 0%, 50% 100%',
left: '100% 0%, 100% 100%, 0% 50%',
right: '0% 0%, 100% 50%, 0% 100%',
};
return `width: ${width}px;\nheight: ${height}px;\nbackground: ${color};\nclip-path: polygon(${points[direction]});`;
}
console.log(generateTriangleCSS('up', 100, 87, '#3B82F6'));
// width: 0; height: 0;
// border-left: 50px solid transparent;
// border-right: 50px solid transparent;
// border-bottom: 87px solid #3B82F6;