সিএসএস ত্রিভুজ কীভাবে কাজ করে?

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

— এমএসকিফিশার

যে স্কোয়ারটি নেই সেখানে কীভাবে? jsfiddle.net/minitech/sZgaa

— রাই-

@ এমএসকিফিশার আপনার সমতুল্য ত্রিভুজের নীচের সীমানার আকারটি সিল (স্কয়ার্ট (3) * 60) হওয়া উচিত নয়? আরও কয়েক পিক্সেল!

— নিলোকট

@ নীলোকট: আমি এটি গোলাকার সংখ্যাগুলিতে তাড়াতাড়ি চোখের সামনে ফেলেছিলাম। আপনি ঠিক বলেছেন, আরও সঠিক একতরফা পরিমাপ হবে (পাশ: 58, নীচে: 100) বা (দিক: 60, নীচে: 104)।

— এমএসকিফিশার

প্রতিটি দিকনির্দেশ এবং আকারের জন্য এখানে একটি দুর্দান্ত সিএসএস ত্রিভুজ জেনারেটর রয়েছে : অ্যাপস.ইকি.এইচকি

— অ্যালান স্টেপস

Answer 1

সিএসএস ত্রিভুজ: পাঁচটি ক্রিয়াকলাপে একটি ট্র্যাজেডি

অ্যালেক্স যেমন বলেছিল , সমান প্রস্থের সীমানাগুলি একে অপরের বিরুদ্ধে 45 ডিগ্রি কোণে উঠে যায়:

যখন আপনার কোনও শীর্ষ সীমানা নেই, এটি দেখতে এটির মতো দেখাচ্ছে:

তারপরে আপনি এটিকে 0 প্রস্থ দিন ...

... এবং 0 এর উচ্চতা ...

... এবং শেষ পর্যন্ত আপনি উভয় পক্ষের সীমানাকে স্বচ্ছ করে তুলেছেন:

এটি একটি ত্রিভুজ ফলাফল।

Comments

@ জোজসিকা, আপনি কেবলমাত্র অতিরিক্ত উপাদান যুক্ত না করে :beforeবা :afterসিউডো ক্লাস ব্যবহার করে একটি পৃষ্ঠায় এই ত্রিভুজগুলি যুক্ত করতে পারেন ।

— zzzzBov

stackoverflow.com/questions/5623072/... আমি মনে করি কি জনাব BoltClock উল্লেখ করা হয়।

— থার্ডডট

অ্যানিমেশন সহ কাজ করুন: jsfiddle.net/pimvdb/mA4Cu/104 । কেবল আমাদের মধ্যে যাদের আমার মতো আরও ভিজ্যুয়াল প্রুফ দরকার ...

— pimvdb

বিভিন্ন left-borderএবং right-border, অ-সমকেন্দ্র ত্রিভুজ তৈরি করা যেতে পারে। এবং যখন অনেক ত্রিভুজ একত্রিত হয় ... jsfiddle.net/zRNgz

— জিমিনপি

2018 এ, এই হ্যাকটি ব্যবহার করার চেয়ে সিএসএসের সাহায্যে ত্রিভুজ তৈরি করার কি আরও ভাল উপায় আছে?

— স্ক্রিবলমাচারার

Answer 2

সীমানাগুলি একটি কোণযুক্ত প্রান্ত ব্যবহার করে যেখানে তারা ছেদ করে (45 equal সমান প্রস্থের সীমানাযুক্ত কোণ, তবে সীমানা প্রস্থ পরিবর্তন করায় কোণটি স্কু করতে পারে)।

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 যা আমি ভবিষ্যতে সংযোজনের জন্য লিঙ্ক করতে পারি। ;)

— হেনরিক হিমবুর্গার

পরিবর্তে এখানে একটি জিআইএফ ব্যবহার করা হয় না কেন?

— প্রসওয়ান

দুঃখিত @ হিমবুর্গার, আমি ছবিগুলি ঠিক করে তোমার উদাহরণটি গণ্ডগোল করে দিয়েছি। আপনাকে ভবিষ্যতে এই উত্তরটির 2 টি পুনর্বিবেচনার লিঙ্ক করতে হবে ।

— ররি ও'কেনে

Answer 4

বিভিন্ন পদ্ধতির:

রূপান্তর ঘোরানো সহ CSS3 ত্রিভুজ

এই কৌশলটি ব্যবহার করে ত্রিভুজাকার আকৃতি তৈরি করা বেশ সহজ। এই প্রযুক্তিটি এখানে কীভাবে কাজ করে তা ব্যাখ্যা করে কোনও অ্যানিমেশন দেখতে পছন্দ করেন এমন লোকদের জন্য:

• অ্যানিমেশনের লিঙ্ক : কীভাবে CSS3 ত্রিভুজ তৈরি করবেন ।
• এবং ডেমো: সিএসএস 3 ত্রিভুজগুলি ট্রান্সফর্ম রোটেট দিয়ে তৈরি।

অন্যথায়, এখানে একটি আইসোসিলকে কীভাবে একটি উপাদান দিয়ে ডান-কোণযুক্ত ত্রিভুজ তৈরি করা যায় তার 4 টি কার্য (এটি কোনও ট্রাজেডি নয়) এর বিশদ বিবরণ।

• নোট 1: বিচ্ছিন্ন ত্রিভুজ এবং অভিনব স্টাফগুলির জন্য, আপনি পদক্ষেপ 4 দেখতে পারেন ।
• দ্রষ্টব্য 2: নিম্নলিখিত স্নিপেটগুলিতে, বিক্রেতা উপসর্গগুলি অন্তর্ভুক্ত নয়। এগুলি কোডপেন ডেমোতে অন্তর্ভুক্ত রয়েছে ।
• দ্রষ্টব্য 3: নিম্নলিখিত ব্যাখ্যার জন্য এইচটিএমএল সর্বদা: <div class="tr"></div>

---

পদক্ষেপ 1: একটি ডিভ করুন

সহজ, কেবল এটি নিশ্চিত করুন width = 1.41 x height। দিক অনুপাত বজায় রাখতে এবং প্রতিক্রিয়াশীল ত্রিভুজটি তৈরি করতে আপনি শতাংশ এবং প্যাডিং-নীচের ব্যবহার সহ কোনও টেকিনেক ( এখানে দেখুন ) ব্যবহার করতে পারেন । নিম্নলিখিত চিত্রটিতে, ডিভের একটি সোনালি হলুদ সীমানা রয়েছে।

সেই ডিভাইসে, একটি ছদ্ম উপাদান প্রবেশ করান এবং এটি 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: এটি লুকান

সিউডো এলিমেন্টের অযাচিত অংশগুলি লুকানোর জন্য (হলুদ সীমান্তের সাথে ডিভিটি উপচে পড়া সমস্ত কিছু) আপনার কেবল ধারকটিতে সেট overflow:hidden;করা দরকার need হলুদ সীমানা সরানোর পরে, আপনি পাবেন ... একটি ট্রায়াঙ্গল ! :

ডেমো

সিএসএস:

.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. থ্রিডি ট্রান্সফর্ম প্রপার্টি দিয়ে কিছুটা রিফ্লেকশন করুন ।
4. দিন ত্রিভুজ সীমানা
5. ত্রিভুজের ভিতরে একটি চিত্র রাখুন
6. আরও অনেক কিছু ... CSS3 এর ক্ষমতা প্রকাশ !

---

কেন এই কৌশলটি ব্যবহার করবেন?

1. ত্রিভুজ সহজেই প্রতিক্রিয়াশীল হতে পারে।
2. আপনি সীমানা দিয়ে ত্রিভুজ তৈরি করতে পারেন ।
3. আপনি ত্রিভুজটির সীমানা বজায় রাখতে পারেন। এর অর্থ আপনি যখন কর্সারটি ত্রিভুজের অভ্যন্তরে তখনই হোভারের অবস্থা বা ইভেন্ট ক্লিক করতে পারেন । এই মত কিছু পরিস্থিতিতে খুব কুশলী হতে পারে এই এক যেখানে প্রতিটি ত্রিভুজ এটা প্রতিবেশীদের ওভারলে করতে পারবে না তাই প্রতিটি ত্রিভুজ এটা নিজস্ব হোভার রাষ্ট্র হয়েছে।
4. আপনি কিছু অভিনব প্রভাব যেমন প্রতিচ্ছবি করতে পারেন ।
5. এটি আপনাকে 2 ডি এবং 3 ডি রূপান্তর বৈশিষ্ট্যগুলি বুঝতে সহায়তা করবে।

কেন এই কৌশলটি ব্যবহার করবেন না?

1. প্রধান অপূর্ণতা হ'ল ব্রাউজারের সামঞ্জস্যতা , 2 ডি রূপান্তর বৈশিষ্ট্যগুলি IE9 + দ্বারা সমর্থিত এবং তাই আপনি যদি আইই 8 সমর্থন করার পরিকল্পনা করেন তবে আপনি এই কৌশলটি ব্যবহার করতে পারবেন না। আরও তথ্যের জন্য CanIuse দেখুন । প্রতিবিম্ব ব্রাউজার সমর্থন যেমন 3 ডি ট্রান্সফর্ম ব্যবহার করে কিছু অভিনব প্রভাবের জন্য আই 10 + (আরও তথ্যের জন্য ক্যানআইজ দেখুন)।
2. আপনার কোনও প্রতিক্রিয়াশীল কিছু লাগবে না এবং একটি সমতল ত্রিভুজ আপনার পক্ষে ঠিক আছে তবে আপনার এখানে সীমান্ত কৌশলটি ব্যাখ্যা করার জন্য এগিয়ে যাওয়া উচিত: আরও ভাল ব্রাউজারের সামঞ্জস্যতা এবং এ্যামাইজিং পোস্টগুলির জন্য ধন্যবাদ বুঝতে আরও সহজ।

Comments

এটি সম্ভবত উল্লেখযোগ্য যে 1.41 হল √2 এর একটি অনুমান এবং আপনার তৈরি ত্রিভুজের অনুভূতির দৈর্ঘ্য, এজন্য আপনার প্রস্থটি (কমপক্ষে) প্রয়োজন।

— কেআরয়ান

আমি উত্তরটি সহজ রাখতে চেয়েছিলাম তবে আপনি ঠিক বলেছেন, @KRyan

— ওয়েব-টিকি

প্রকৃতপক্ষে, এটি ব্যবহারের চেষ্টা করার সাথে, ব্যবহারের জন্য পৃথক প্রস্থ কীভাবে নেওয়া হয়েছিল তার একটি উল্লেখ skewXদরকারী।

— কেআরয়ান

যখন ত্রিভুজটির জন্য আপনার 1px কঠিন সীমানা প্রয়োজন তখন এই পদ্ধতিটি আরও ভাল কাজ করে।

— রোমান লসেভ

এটি ত্রিভুজটির জন্য আপনি সীমানা তৈরি করতে চান সেই ক্ষেত্রে, আমি যখন এই টিকা বাক্সটি তৈরি করতে চাই তখন অ্যানোটেশনবক্স

— vanduc1102

Answer 5

এখানে জেএসফিডেলের একটি অ্যানিমেশন আমি প্রদর্শনের জন্য তৈরি করেছি।

নীচে স্নিপেট দেখুন।

এটি একটি স্ক্রিনকাস্ট থেকে তৈরি একটি অ্যানিমেটেড জিআইএফ

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 id="triangle" />

এখন সিএসএস ধাপে ধাপে সম্পাদনা করুন, যাতে আপনি চারপাশে কী ঘটছে তা পরিষ্কার ধারণা পাবেন

পদক্ষেপ 1: জেএসফিডেল লিঙ্ক:

 #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;
    }

এটি একটি সাধারণ ডিভ। খুব সাধারণ সিএসএস সহ। সুতরাং একজন সাধারণ মানুষ বুঝতে পারে। ডিভের সীমানা 50 পিক্সেলের সাথে 150 x 150 পিক্সেলের মাত্রা রয়েছে। চিত্রটি সংযুক্ত:

পদক্ষেপ 2: জেএসফিডেল লিঙ্ক:

#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 জেএসফিডেল লিঙ্ক:

#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: জেএসফিডাল:

#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: জেএসফিডেল লিঙ্ক:

#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

এবং এখন সম্পূর্ণ ভিন্ন কিছু ...

সিএসএস কৌশলগুলি ব্যবহারের পরিবর্তে এইচটিএমএল সত্তার মতো সহজ সমাধানগুলি ভুলে যাবেন না:

▲

ফলাফল:

▲

দেখুন: উপরে এবং ডাউন ত্রিভুজগুলির জন্য এইচটিএমএল সত্ত্বা কী?

Comments

আমি মনে করি না "পিটানো" এখানে একটি উপযুক্ত শব্দ। সমাধান হরফ মেট্রিকের উপর নির্ভর করে, সুতরাং সঠিক অবস্থানটি বরং সন্দেহজনক, এটি উল্লেখ করার জন্য নয় যে আকারের উপর আপনার কোনও নিয়ন্ত্রণ নেই।

— ব্যবহারকারী 776686

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

এটি কীভাবে ক্রস ব্রাউজার নয়? ত্রিভুজগুলি আই 6 এ ফিরে কাজ করা উচিত।

— ক্রিসকলে

এর আগে: এবং এর পরে ব্যবহার 100% সমর্থিত নয়।

— সিউডোনিজা

Psuedo- উপাদানগুলি <IE8 সমর্থিত নয়।

— অ্যালেক্স

Answer 10

ঠিক আছে, উপাদানগুলির সীমানা এইচটিএমএল এবং সিএসএসে একসাথে কাজ করার কারণে এই ত্রিভুজটি তৈরি হবে ...

যেহেতু আমরা সাধারণত 1 বা 2px সীমানা ব্যবহার করি, আমরা কখনই লক্ষ্য করব না যে সীমানাগুলি একই প্রস্থের সাথে একে অপরকে 45 ° কোণ তৈরি করে এবং প্রস্থ পরিবর্তন হলে, কোণ ডিগ্রিটিও পরিবর্তিত হয়, নীচে আমি তৈরি করা সিএসএস কোডটি চালান:

.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 এর জন্য, কেবল আইই 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

এটি একটি সুন্দর সমাধান, তবে এটি লক্ষ্য করা উচিত যে এটি কেবলমাত্র আইই 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>

---

downside

এই মুহুর্তে এটির একটি বড় নেতিবাচক প্রভাব রয়েছে, একটি হ'ল এটির সমর্থনের বড় অভাব, কেবল সত্যই -webkit-ব্রাউজারগুলির মধ্যে covered াকা থাকে এবং IE তে কোনও সমর্থন নেই এবং ফায়ারফক্সে কেবলমাত্র আংশিক।

---

সম্পদ

আরও ভালভাবে বুঝতে clip-pathএবং নিজের তৈরি করা শুরু করতে সহায়তা করার জন্য এখানে কিছু দরকারী সংস্থান এবং উপাদান রয়েছে ।

• ক্লিপি - একটি clip-pathজেনারেটর
• ডাব্লু 3 সি প্রার্থী প্রস্তাব ফাইল
• এমডিএন 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>

ধাপ ২

এখন আমাদের দ্বিতীয় ত্রিভুজটির প্রধান সীমানা রঙটি পটভূমির একই রঙে সেট করতে হবে:

.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

SASS (এসসিএসএস) ত্রিভুজ মিশ্রণ

আমি স্বয়ংক্রিয়ভাবে একটি সিএসএস ত্রিভুজ উত্পন্ন করা সহজ (এবং ডিআরওয়াই) করার জন্য এটি লিখেছিলাম:

// 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

^{আপনি যদি ত্রিভুজের সীমানা প্রয়োগ করতে চান তবে এটি পড়ুন: সিএসএস দিয়ে একটি ত্রিভুজ তৈরি করুন?}

প্রায় সমস্ত উত্তর সীমানা ব্যবহার করে নির্মিত ত্রিভুজটিতে ফোকাস করে তাই আমি linear-gradientপদ্ধতিটি বিস্তারিতভাবে বর্ণনা করতে যাচ্ছি (এর উত্তরে যেমন শুরু হয়েছিল) @ লিমা_ফিলের )।

এর মতো ডিগ্রি মান ব্যবহার করা 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) সমপরিমাণ ত্রিভুজ

গ্রেডিয়েন্টের উচ্চতা এবং প্রস্থের মধ্যে আমাদের একটি সম্পর্ক রাখা দরকার বলে এটি পরিচালনা করতে কিছুটা জটিল। উপরের মতো একই ত্রিভুজটি আমাদের থাকবে তবে সমদলীয় ত্রিভুজকে একটি সমবাহুতে রূপান্তর করতে আমরা গণনাটিকে আরও জটিল করে তুলব।

এটি সহজ করার জন্য, আমরা বিবেচনা করব যে আমাদের ডিভের প্রস্থটি জানা আছে এবং উচ্চতাটি আমাদের ত্রিভুজটি ভিতরে ভিতরে আঁকতে সক্ষম হবে ( 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>

আরেকটি উপায় হ'ল ডিভের উচ্চতা নিয়ন্ত্রণ করা এবং গ্রেডিয়েন্টের বাক্য গঠন সহজ রাখা:

.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) র্যান্ডম ত্রিভুজ

এলোমেলো ত্রিভুজটি অর্জন করার জন্য, এটি সহজ কারণ আমাদের কেবলমাত্র প্রতিটি একের 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²)

এখন আমরা সিএসএসের সীমাতে পৌঁছেছি এমনকি 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

ধারণাগুলি নিয়ে খেলতে এবং শেখার জন্য এখানে কিছু কোড is

এইচটিএমএল:

<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;
}

এটি নিয়ে খেলুন এবং দেখুন কী ঘটে। উচ্চতা এবং প্রস্থ শূন্য সেট করুন। তারপরে উপরের সীমানাটি সরান এবং বাম এবং ডান স্বচ্ছ করুন, বা একটি CSS ত্রিভুজ তৈরি করতে নীচের কোডটি দেখুন:

#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

আমি জানি এটি একটি পুরানো, তবে আমি এই আলোচনায় যুক্ত করতে চাই যে এইচটিএমএল এবং সিএসএস ব্যবহার করে ত্রিভুজ তৈরির জন্য কমপক্ষে 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>