CSS त्रिकोण कैसे काम करते हैं?

Question

सीएसएस ट्रिक्स में बहुत सी सीएसएस आकृतियाँ हैं - सीएसएस के आकार और मैं विशेष रूप से एक त्रिकोण के साथ हैरान हूँ:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

यह कैसे और क्यों काम करता है?

Comments

आप कर सकते हैं: jsfiddle.net/wbZet

— mskfisher

कैसे वर्ग के बारे में है कि वहाँ नहीं है? jsfiddle.net/minitech/sZgaa

— Ry-

@mskfisher आपके समबाहु त्रिभुज में नीचे की सीमा का आकार छत (sqrt (3) * 60) नहीं होना चाहिए? कुछ पिक्सेल और फिर!

— नीलोक्ट

@ निलोक्ट: मैंने इसे गोल संख्याओं पर जल्दी से देखा। आप सही हैं, अधिक सटीक समभुज माप होगा (पक्ष: 58, नीचे: 100) या (पक्ष: 60, नीचे: 104)।

— mskfisher

यहाँ एक है महान सीएसएस त्रिकोण जनरेटर : हर दिशाओं और आकार के लिए apps.eky.hk/css-triangle-generator

— एलन Stepps

Answer 1

सीएसएस त्रिकोण: ए ट्रेजेडी इन फाइव एक्ट्स

जैसा कि एलेक्स ने कहा , 45 डिग्री के कोण पर एक दूसरे के खिलाफ बराबर चौड़ाई बट की सीमाएं:

जब आपके पास कोई शीर्ष सीमा नहीं है, तो यह इस तरह दिखता है:

फिर आप इसे 0 की चौड़ाई दें ...

... और 0 की ऊंचाई ...

... और अंत में, आप दो तरफ की सीमाओं को पारदर्शी बनाते हैं:

जिसके परिणामस्वरूप एक त्रिकोण होता है।

Comments

@Jauzsika, तो आप बस का उपयोग करके अतिरिक्त तत्वों को जोड़ने के बिना एक पेज में इन त्रिकोण में जोड़ सकते हैं :beforeया :afterछद्म कक्षाएं।

— zzzzBov

stackoverflow.com/questions/5623072/… क्या मुझे लगता है कि मिस्टर बोल्टकॉक का जिक्र है।

— ३०

एनिमेशन के साथ अधिनियम: jsfiddle.net/pimvdb/mA4Cu/104 । बस हममें से जिन्हें मेरे जैसे और भी ज्यादा विजुअल प्रूफ चाहिए ...

— pimvdb

विभिन्न left-borderऔर right-border, गैर-समद्विबाहु त्रिकोण के साथ बनाया जा सकता है। और जब कई त्रिकोण संयुक्त होते हैं ... jsfiddle.net/zRNgz

— JiminP

2018 में, क्या इस हैक का उपयोग करने के बजाय CSS के साथ एक त्रिकोण बनाने का एक बेहतर तरीका है?

— स्क्रिबलमिशर

Answer 2

सीमाएं एक कोण किनारे का उपयोग करती हैं, जहां वे एक दूसरे को काटते हैं (समान चौड़ाई सीमाओं के साथ 45 ° कोण, लेकिन सीमा चौड़ाई को बदलकर कोण को तिरछा कर सकते हैं)।

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}

<div></div>

JsFiddle के लिए एक नज़र है ।

कुछ सीमाओं को छिपाकर, आप त्रिकोण प्रभाव प्राप्त कर सकते हैं (जैसा कि आप अलग-अलग हिस्सों को अलग-अलग रंग बनाकर देख सकते हैं)। transparentत्रिकोण आकार को प्राप्त करने के लिए अक्सर किनारे के रंग के रूप में उपयोग किया जाता है।

Answer 3

एक मूल वर्ग और सीमाओं के साथ शुरू करें। प्रत्येक सीमा को एक अलग रंग दिया जाएगा ताकि हम उन्हें अलग बता सकें:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

जो आपको यह देता है :

लेकिन शीर्ष सीमा की कोई आवश्यकता नहीं है, इसलिए इसकी चौड़ाई निर्धारित करें 0px। अब हमारा बॉर्डर-बॉटम 200pxहमारे त्रिकोण को 200px लंबा कर देगा।

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

और हम मिल जाएगा इस :

फिर दो पक्ष त्रिकोणों को छिपाने के लिए, सीमा-रंग को पारदर्शी पर सेट करें। चूंकि शीर्ष-सीमा को प्रभावी रूप से हटा दिया गया है, हम सीमा-शीर्ष-रंग को पारदर्शी के रूप में भी सेट कर सकते हैं।

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

अंत में हम इसे प्राप्त करते हैं :

Comments

कूल, लेकिन यह उसी तरह नहीं है? :-)

— स्टैनिस्लाव शबलिन

There's another way to draw .., जो वैसे ही निकलता है :) अच्छी व्याख्या हालांकि

— हम्माद खान

-1 बड़े पैमाने पर कलाकृतियों के साथ जेपीईजी का उपयोग करने के लिए। लेकिन जेपीईजी का उपयोग नहीं करने के लिए एक महान उदाहरण बनाने के लिए +1 जो कि मैं भविष्य में डिटर्जेंट के लिए लिंक कर सकता हूं। ;)

— हेनरिक हेमबर्गर

यहाँ एक gif का उपयोग क्यों नहीं किया जाता है?

— प्रशन wan

क्षमा करें @hheimbuerger, मैंने छवियों को ठीक करके आपके उदाहरण को गड़बड़ कर दिया। आपको भविष्य में इस उत्तर के संशोधन 2 से लिंक करना होगा।

— रोरी ओ'केन

Answer 4

अलग दृष्टिकोण:

CSS3 के त्रिकोण बारी बारी से बदल जाते हैं

त्रिकोणीय आकार इस तकनीक का उपयोग करने के लिए बहुत आसान है। उन लोगों के लिए जो एक एनीमेशन देखना पसंद करते हैं, जो बताते हैं कि यह तकनीक यहाँ कैसे काम करती है:

• लिंक से जुड़ाव: CSS3 के त्रिकोण को कैसे बनाएं ।
• और DEMO: CSS3 के ट्राइएंगल्स ट्रांसफॉर्म रोटेट के साथ बने हैं।

अन्यथा, एक तत्व के साथ समद्विबाहु समकोण त्रिभुज बनाने के तरीके में 4 कृत्यों (यह एक त्रासदी नहीं है) में विस्तृत विवरण दिया गया है।

• नोट 1: गैर समद्विबाहु त्रिकोण और फैंसी सामान के लिए, आप चरण 4 देख सकते हैं ।
• नोट 2: निम्नलिखित स्निपेट्स में, विक्रेता उपसर्ग शामिल नहीं हैं। वे कोडपेन डेमो में शामिल हैं ।
• नोट 3: निम्नलिखित स्पष्टीकरण के लिए HTML हमेशा है: <div class="tr"></div>

---

चरण 1: एक div बनाओ

आसान है, बस यह सुनिश्चित करें कि width = 1.41 x height। आप किसी भी techinque उपयोग कर सकते हैं ( यहाँ देखें ) प्रतिशत और padding-bottom के उपयोग के अनुपात बनाए रखने के लिए और एक बनाने के लिए सहित उत्तरदायी त्रिकोण । निम्नलिखित छवि में, div में एक सुनहरा पीला बॉर्डर है।

उस div में, एक छद्म तत्व डालें और इसे 100% चौड़ाई और माता-पिता की ऊंचाई दें। निम्नलिखित छवि में छद्म तत्व की एक नीली पृष्ठभूमि है।

इस बिंदु पर, हमारे पास यह सीएसएस है :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

चरण 2: चलो घुमाएँ

सबसे पहले, सबसे महत्वपूर्ण: एक परिवर्तन मूल को परिभाषित करें । डिफ़ॉल्ट मूल छद्म तत्व के केंद्र में है और हम नीचे बाईं ओर इसकी आवश्यकता है। इस सीएसएस को छद्म तत्व से जोड़कर :

transform-origin:0 100%; या transform-origin: left bottom;

अब हम छद्म तत्व को 45 डिग्री के साथ दक्षिणावर्त घुमा सकते हैं transform : rotate(45deg);

इस बिंदु पर, हमारे पास यह सीएसएस है :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

चरण 3: इसे छिपाएँ

छद्म तत्व के अवांछित भागों को छिपाने के लिए (सब कुछ जो पीले रंग की सीमा के साथ div को ओवरफ्लो करता है) आपको बस overflow:hidden;कंटेनर पर सेट करने की आवश्यकता है । पीले रंग की सीमा को हटाने के बाद, आपको मिलता है ... एक ट्रायंगल ! :

डेमो

सीएसएस:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

चरण 4: आगे बढ़ें ...

जैसा कि डेमो में दिखाया गया है , आप त्रिकोण को अनुकूलित कर सकते हैं:

1. उनके साथ खेलते हुए उन्हें पतला या चपटा करें skewX()।
2. ट्रांसफॉर्म ऑर्गन और रोटेशन दिशा के साथ खेलकर उन्हें बाएं, दाएं या किसी अन्य दिशा में इंगित करें।
3. 3D ट्रांसफ़ॉर्म प्रॉपर्टी के साथ कुछ रिफ्लेक्सियन करें ।
4. त्रिकोण सीमाओं दें
5. त्रिकोण के अंदर एक छवि रखो
6. बहुत अधिक ... CSS3 की शक्तियां प्राप्त करें !

---

इस तकनीक का उपयोग क्यों करें?

1. त्रिकोण आसानी से उत्तरदायी हो सकता है।
2. आप सीमा के साथ एक त्रिकोण बना सकते हैं ।
3. आप त्रिकोण की सीमाओं को बनाए रख सकते हैं। इसका मतलब है कि आप होवर स्टेट को ट्रिगर कर सकते हैं या इवेंट को क्लिक कर सकते हैं जब कर्सर त्रिकोण के अंदर हो । यह इस तरह से कुछ स्थितियों में बहुत आसान हो सकता है, जहां प्रत्येक त्रिकोण अपने पड़ोसी को ओवरले नहीं कर सकता है, इसलिए प्रत्येक त्रिकोण का अपना होवर राज्य है।
4. आप कुछ कल्पना प्रभाव जैसे प्रतिबिंब बना सकते हैं ।
5. यह आपको 2d और 3D ट्रांसफ़ॉर्म प्रॉपर्टीज़ को समझने में मदद करेगा।

इस तकनीक का उपयोग क्यों न करें?

1. मुख्य दोष ब्राउज़र संगतता है , 2d ट्रांसफ़ॉर्म गुण IE9 + द्वारा समर्थित हैं और इसलिए यदि आप IE8 का समर्थन करने की योजना बनाते हैं तो आप इस तकनीक का उपयोग नहीं कर सकते। अधिक जानकारी के लिए CanIuse देखें । 3 डी रूपांतरों का उपयोग करते हुए कुछ फैंसी प्रभावों के लिए जैसे प्रतिबिंब ब्राउज़र समर्थन IE10 + है ( अधिक जानकारी के लिए canIuse देखें )।
2. आपको कुछ भी प्रतिक्रियाशील होने की आवश्यकता नहीं है और एक सादा त्रिकोण आपके लिए ठीक है फिर आपको यहां बताई गई सीमा तकनीक के लिए जाना चाहिए: बेहतर ब्राउज़र संगतता और यहां आने वाले पदों के लिए धन्यवाद समझना आसान है।

Comments

यह शायद ध्यान देने योग्य है कि 1.41 and2 का एक अनुमान है और आपके द्वारा बनाए गए त्रिकोण के कर्ण की लंबाई है, यही कारण है कि आपको उस चौड़ाई की आवश्यकता है (कम से कम)।

— केरेन

मैं उत्तर को सरल रखना चाहता था लेकिन आप सही हैं, इसका उल्लेख @KRyan

— web-tiki

वास्तव में, इसका उपयोग करने की कोशिश में, इसके साथ उपयोग करने के लिए अलग-अलग चौड़ाई कैसे प्राप्त की जाती है, इसका उल्लेख skewXउपयोगी होगा।

— केरेन

यह तरीका बेहतर काम करता है जब आपको त्रिकोण के लिए 1px ठोस बॉर्डर की आवश्यकता होती है।

— रोमन लोसव

इस मामले में आप त्रिकोण के लिए सीमाओं बनाना चाहते हैं के लिए है, मैं सीमाओं तरीके के साथ फंस गया था जब मैं इस टिप्पणी बॉक्स बनाना चाहते हैं AnnotationBox

— vanduc1102

Answer 5

यहाँ JSFiddle I में प्रदर्शन के लिए बनाया गया एक एनीमेशन है ।

नीचे स्निपेट भी देखें।

यह एक एनिमेटेड GIF है जो एक स्क्रेंकस्ट से बनाया गया है

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

---

यादृच्छिक संस्करण

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

---

सभी एक बार संस्करण में

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Answer 6

हम कहते हैं कि हम निम्नलिखित div है:

<div id="triangle" />

अब CSS step-by-step को एडिट करें, जिससे आपको स्पष्ट अंदाजा हो जाएगा कि आसपास क्या हो रहा है

चरण 1: JSfiddle लिंक:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

यह एक साधारण तलाक है। बहुत ही सरल सीएसएस के साथ। तो एक आम आदमी समझ सकता है। Div में सीमा 50 पिक्सल्स के साथ 150 x 150 पिक्सल्स हैं। छवि संलग्न है:

चरण 2: JSfiddle लिंक:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

अब मैंने बस सभी 4 पक्षों के बॉर्डर-रंग को बदल दिया। छवि संलग्न है।

कदम: 3 JSfiddle लिंक:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

अब मैंने सिर्फ 150 पिक्सल से शून्य तक की ऊंचाई और चौड़ाई को बदल दिया है। छवि संलग्न है

चरण 4: JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

अब मैंने नीचे की सीमा से अलग सभी सीमाओं को पारदर्शी बना दिया है। छवि नीचे संलग्न है।

चरण 5: JSfiddle लिंक:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

अब मैंने सिर्फ पृष्ठभूमि का रंग बदलकर सफेद कर दिया है। छवि संलग्न है।

इसलिए हमें वह त्रिकोण मिला जिसकी हमें आवश्यकता थी।

Comments

आपने पहले चरण के लिए एक नीदरलैंड पोर्टल का उपयोग क्यों किया?

— लुइज़ोयोला

Answer 7

और अब कुछ पूरी तरह से अलग ...

सीएसएस ट्रिक का उपयोग करने के बजाय html संस्थाओं के रूप में समाधान के बारे में मत भूलना:

▲

परिणाम:

▲

देखें: ऊपर और नीचे त्रिकोण के लिए HTML इकाइयाँ क्या हैं?

Comments

मुझे नहीं लगता कि "पीटा" यहाँ एक उपयुक्त शब्द है। समाधान फ़ॉन्ट मैट्रिक्स पर निर्भर करता है, इसलिए सटीक स्थिति बल्कि संदिग्ध है, यह उल्लेख करने के लिए नहीं कि आपके पास आकृति पर कोई नियंत्रण नहीं है।

— user776686

Answer 8

नीचे त्रिकोण पर विचार करें

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

यह हमें दिया जाता है:

यह इस आकार में क्यों आया? नीचे दिए गए आरेख आयामों को बताते हैं, ध्यान दें कि 15px का उपयोग नीचे की सीमा के लिए किया गया था और 10px का उपयोग बाएं और दाएं के लिए किया गया था।

समकोण त्रिभुज बनाना सही सीमा को हटाकर भी बनाना बहुत आसान है।

Answer 9

इसे एक कदम आगे ले जाते हुए, इस पर आधारित सीएसएस का उपयोग करते हुए मैंने अपने पिछले और अगले बटनों में तीर जोड़े (हाँ मुझे पता है कि यह 100% क्रॉस-ब्राउज़र नहीं है, लेकिन कोई भी कम नहीं है)।

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

Comments

यह क्रॉस ब्राउज़र कैसे नहीं है? त्रिकोण IE6 में वापस काम करना चाहिए।

— 1938 में क्रिसस्कॉले

का उपयोग करें: पहले और: 100% समर्थित नहीं हैं।

— छद्मनिंजा

Psuedo- तत्वों का समर्थन नहीं कर रहे हैं <IE8।

— एलेक्स

Answer 10

ठीक, यह त्रिकोण उस तरीके से बनाया जाएगा जिस तरह से तत्वों की सीमाएं HTML और सीएसएस में एक साथ काम करती हैं ...

जैसा कि हम आम तौर पर 1 या 2px सीमाओं का उपयोग करते हैं, हम कभी ध्यान नहीं देते हैं कि सीमाएं समान चौड़ाई के साथ एक-दूसरे को 45 ° कोण बनाती हैं और यदि चौड़ाई बदलती है, तो कोण की डिग्री भी बदल जाती है, नीचे दिए गए CSS कोड को चलाएं:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

फिर अगले चरण में, हमारे पास कोई चौड़ाई या ऊँचाई नहीं है, कुछ इस तरह:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

और अब हम नीचे और नीचे की सीमाओं को अदृश्य बनाने के लिए अपने वांछित त्रिकोण को नीचे के रूप में बनाते हैं:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div class="triangle"></div>

यदि आप कदमों को देखने के लिए स्निपेट को चलाने के इच्छुक नहीं हैं, तो मैंने एक छवि के सभी चरणों पर एक नज़र रखने के लिए एक छवि अनुक्रम बनाया है:

Answer 11

अलग दृष्टिकोण। रैखिक ढाल के साथ (IE के लिए, केवल IE 10+)। आप किसी भी कोण का उपयोग कर सकते हैं:

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}

<div class="triangle"></div>

यहाँ jsfiddle है

Comments

यह एक सुंदर समाधान है, लेकिन यह ध्यान दिया जाना चाहिए कि यह केवल IE 10+ है।

— एरिक हू

Answer 12

सीएसएस clip-path

यह कुछ ऐसा है जो मुझे लगता है कि यह सवाल याद किया गया है; clip-path

clip-path संक्षेप में

क्लिपिंग, clip-pathसंपत्ति के साथ , कागज के एक आयताकार टुकड़े से एक आकृति (एक सर्कल या एक पेंटागन की तरह) काटने के लिए समान है। संपत्ति " सीएसएस मास्किंग मॉड्यूल स्तर 1 " विनिर्देशन के अंतर्गत आता है । युक्ति बताती है, "सीएसएस मास्किंग आंशिक रूप से या पूरी तरह से दृश्य तत्वों के कुछ हिस्सों को छिपाने के लिए दो साधन प्रदान करता है: मास्किंग और क्लिपिंग"।

• मुंहतोड़ पत्रिका से निकालें

---

clip-pathअपने मापदंडों में निर्दिष्ट आकार में कटौती करने के लिए अपनी सीमाओं के बजाय स्वयं तत्व का उपयोग करेगा। यह एक सुपर सरल प्रतिशत आधारित समन्वय प्रणाली का उपयोग करता है जो इसे बहुत आसान बनाता है और इसका मतलब है कि आप इसे उठा सकते हैं और कुछ ही मिनटों में अजीब और अद्भुत आकृतियाँ बना सकते हैं।

---

त्रिभुज आकार का उदाहरण

div {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>

---

नकारात्मक पक्ष यह है

यह इस समय एक प्रमुख नकारात्मक पहलू है, एक यह समर्थन की बड़ी कमी है, केवल वास्तव में -webkit-ब्राउज़रों के भीतर कवर किया जा रहा है और IE पर कोई समर्थन नहीं है और केवल फ़ायरफ़ॉक्स में बहुत आंशिक है।

---

साधन

बेहतर समझने में मदद करने के लिए यहां कुछ उपयोगी संसाधन और सामग्री दी गई है clip-pathऔर अपनी खुद की रचना भी शुरू करें।

• क्लिप्पी - एक clip-pathजनरेटर
• W3C उम्मीदवार सिफारिश फ़ाइल
• MDN clip-pathप्रलेखन
• clip-path ब्राउज़र का समर्थन

Answer 13

यह एक पुराना प्रश्न है, लेकिन मुझे लगता है कि यह इस त्रिकोण तकनीक का उपयोग करके एक तीर बनाने के तरीके को साझा करने के लिए लायक होगा।

चरण 1:

2 त्रिकोण बनाते हैं, दूसरे के लिए हम :afterछद्म वर्ग का उपयोग करेंगे और इसे दूसरे के ठीक नीचे रखेंगे :

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

चरण 2

अब हमें बस दूसरे त्रिभुज के मुख्य सीमा रंग को पृष्ठभूमि के एक ही रंग पर सेट करना है:

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

सभी तीरों के साथ फ़ेल्ड:
http://jsfiddle.net/tomsarduy/r0zksgeu/

Answer 14

एसएएसएस (एससीएसएस) त्रिकोण मिक्सिन

सीएसएस त्रिकोण को स्वचालित रूप से उत्पन्न करने के लिए मैंने इसे (और DRY) आसान बनाने के लिए लिखा था:

// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
  margin-#{$direction}: -$size;
}

उपयोग मामला उदाहरण:

span {
  @include triangle(bottom, red, 10px);
}

खेल का मैदान पेज

---

महत्वपूर्ण नोट:
यदि त्रिकोण कुछ ब्राउज़रों में पिक्सेलित लगता है, तो यहां वर्णित तरीकों में से एक का प्रयास करें ।

Answer 15

^{यदि आप त्रिभुज पर बॉर्डर लगाना चाहते हैं तो इसे पढ़ें: CSS के साथ एक त्रिभुज बनाएँ?}

लगभग सभी उत्तर बॉर्डर का उपयोग करते हुए बनाए गए त्रिकोण पर ध्यान केंद्रित करते हैं इसलिए मैं linear-gradientविधि को विस्तृत करने जा रहा हूं (जैसा कि @lima_fil के उत्तर में शुरू किया गया है )।

डिग्री मूल्य का उपयोग करना 45°हमें एक विशिष्ट अनुपात का सम्मान करने के लिए मजबूर करेगा height/width, ताकि हम जो त्रिकोण चाहते हैं उसे प्राप्त कर सकें और यह उत्तरदायी नहीं होगा:

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 49.5%,red 50%);
  
  /*To illustrate*/
  border:1px solid;
}

Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

ऐसा करने के बजाय हमें दिशा के पूर्वनिर्धारित मूल्यों पर विचार करना चाहिए जैसे to bottom,to top आदि इस मामले में हम त्रिकोण आकार के किसी भी प्रकार प्राप्त कर सकते हैं, जबकि यह उत्तरदायी रखते हुए।

1) आयत त्रिकोण

इस तरह के त्रिकोण प्राप्त करने के लिए हम एक रेखीय-ढाल और की तरह एक तिरछी दिशा की जरूरत है to bottom right, to top left, to bottom left, आदि

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri-1"></div>
<div class="tri-2"></div>

2) समद्विबाहु त्रिभुज

इसके लिए हमें ऊपर की तरह 2 रैखिक-ढाल की आवश्यकता होगी और प्रत्येक को आधी चौड़ाई (या ऊँचाई) मिलेगी। यह ऐसा है जैसे हम पहले त्रिकोण की दर्पण छवि बनाते हैं।

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri"></div>

3) समबाहु त्रिभुज

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

इसे आसान बनाने के लिए, हम इस बात पर विचार करेंगे कि हमारी div की चौड़ाई ज्ञात है और ऊँचाई इतनी बड़ी है कि हमारे त्रिभुज को अंदर खींच सके ( height >= width)।

हमारे पास दो ग्रेडिएंट हैं g1और g2, ब्लू लाइन की चौड़ाई है div wऔर प्रत्येक ग्रेडिएंट में इसका 50% ( w/2) होगा और त्रिकोण सॉल्ड का प्रत्येक पक्ष बराबर होगा w। हरे रंग की रेखा दोनों ढाल की ऊंचाई है hgऔर हम नीचे दिए गए सूत्र को आसानी से प्राप्त कर सकते हैं:

(w/2)² + hg² = w²---> hg = (sqrt(3)/2) * w--->hg = 0.866 * w

हम calc()अपनी गणना करने और आवश्यक परिणाम प्राप्त करने के लिए इस पर भरोसा कर सकते हैं :

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

दूसरा तरीका यह है कि div की ऊंचाई को नियंत्रित किया जाए और ग्रेडिएंट के सिंटैक्स को आसान रखा जाए:

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

4) रैंडम त्रिकोण

एक यादृच्छिक त्रिकोण प्राप्त करने के लिए, यह आसान है क्योंकि हमें बस प्रत्येक एक BUT की 50% की स्थिति को हटाने की आवश्यकता है, हमें दो स्थिति रखनी चाहिए (दोनों की ऊंचाई समान होनी चाहिए और दोनों चौड़ाई का योग 100% होना चाहिए)।

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

<div class="tri-1"></div>

लेकिन क्या होगा यदि हम प्रत्येक पक्ष के लिए एक मूल्य निर्धारित करना चाहते हैं? हमें बस फिर से गणना करने की आवश्यकता है!

चलो परिभाषित करते हैं hg1और hg2हमारी ढाल की ऊंचाई के रूप में (दोनों लाल रेखा के बराबर हैं) wg1और फिर wg2हमारी ढाल की चौड़ाई के रूप में ( wg1 + wg2 = a)। मैं गणना का विस्तार नहीं करने जा रहा हूं, लेकिन अंत में हमारे पास होगा:

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

अब हम CSS की सीमा तक पहुँच चुके हैं, यहाँ तक कि calc()हम इसे लागू नहीं कर पाएंगे इसलिए हमें बस अंतिम परिणाम को मैन्युअल रूप से इकट्ठा करने और उन्हें निश्चित आकार के रूप में उपयोग करने की आवश्यकता है:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

बक्शीश

हमें यह नहीं भूलना चाहिए कि हम रोटेशन और / या तिरछा भी लगा सकते हैं और हमारे पास अधिक त्रिकोण प्राप्त करने के लिए अधिक विकल्प हैं:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

और निश्चित रूप से हमें एसवीजी समाधान को ध्यान में रखना चाहिए जो कुछ स्थिति में अधिक उपयुक्त हो सकता है:

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>

Answer 16

यहाँ एक और बेला है:

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

Answer 17

दूसरों ने पहले से ही यह अच्छी तरह से समझाया है। मैं आपको एक एनीमेशन देता हूं जो इसे जल्दी समझाएगा: http://codepen.io/chriscoyier/pen/lotjh

आपके लिए अवधारणाओं के साथ खेलने और सीखने के लिए यहां कुछ कोड है।

HTML:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

सीएसएस:

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

इसके साथ खेलते हैं और देखते हैं कि क्या होता है। ऊँचाई और चौड़ाई शून्य पर सेट करें। फिर शीर्ष सीमा को हटा दें और बाएं और दाएं पारदर्शी बनाएं, या बस एक सीएसएस त्रिकोण बनाने के लिए नीचे दिए गए कोड को देखें:

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

Answer 18

आप के साथ चारों ओर खेलने के लिए चाहते हैं border-size, widthऔर heightऔर देखते हैं कि उन विभिन्न आकार बना सकते हैं, इस प्रयास करें:

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}

<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

Answer 19

इसे इस्तेमाल करे:-

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

Answer 20

मुझे पता है कि यह एक पुराना है, लेकिन मैं इस चर्चा में जोड़ना चाहूंगा कि HTML और CSS का उपयोग करके त्रिकोण बनाने के लिए कम से कम 5 अलग-अलग विधियां हैं।

1. का उपयोग करते हुए borders
2. का उपयोग करते हुए linear-gradient
3. का उपयोग करते हुए conic-gradient
4. का उपयोग कर transformऔरoverflow
5. का उपयोग करते हुए clip-path

मुझे लगता है कि विधि 3 को छोड़कर सभी को यहां कवर किया गया है conic-gradient, इसलिए मैं इसे यहां साझा करूंगा:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

<div class="triangle"></div>