Ada banyak bentuk CSS berbeda di Trik CSS - Bentuk CSS dan saya sangat bingung dengan segitiga:

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

Bagaimana dan mengapa ini bekerja?

CSS Triangles: Tragedi dalam Lima Tindakan

Seperti yang dikatakan alex , batas dengan lebar yang sama saling berhadapan satu sama lain pada sudut 45 derajat:

Ketika Anda tidak memiliki batas atas, terlihat seperti ini:

Maka Anda memberinya lebar 0 ...

... dan ketinggian 0 ...

... dan akhirnya, Anda membuat dua sisi perbatasan transparan:

Itu menghasilkan segitiga.

Perbatasan menggunakan tepi miring di mana mereka berpotongan (sudut 45 ° dengan batas lebar yang sama, tetapi mengubah lebar perbatasan dapat mengubah sudut).

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

<div></div>

Lihatlah jsFiddle .

Dengan menyembunyikan batas-batas tertentu, Anda bisa mendapatkan efek segitiga (seperti yang Anda lihat di atas dengan membuat bagian-bagian berbeda warna yang berbeda). transparentsering digunakan sebagai warna tepi untuk mencapai bentuk segitiga.

Mulai dengan bujur sangkar dasar dan batas. Setiap perbatasan akan diberi warna berbeda sehingga kami dapat membedakannya:

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

yang memberi Anda ini :

Tapi tidak perlu untuk perbatasan atas, jadi atur lebarnya 0px. Sekarang batas bawah kita 200pxakan membuat segitiga kita 200px tinggi.

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

dan kita akan mendapatkan ini :

Kemudian untuk menyembunyikan dua sisi segitiga, atur warna perbatasan menjadi transparan. Karena batas atas telah dihapus secara efektif, kami dapat mengatur batas warna atas menjadi transparan juga.

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

akhirnya kami mendapatkan ini :

Pendekatan yang berbeda:

CSS3 segitiga dengan transformasi rotate

Bentuk segitiga cukup mudah dibuat menggunakan teknik ini. Bagi orang yang lebih suka melihat animasi yang menjelaskan bagaimana teknik ini bekerja di sini adalah:

• Tautan ke ANIMASI: Cara membuat segitiga CSS3 .
• Dan DEMO: CSS3 segitiga dibuat dengan rotate transform.

Jika tidak, berikut adalah penjelasan terperinci dalam 4 babak (ini bukan tragedi) tentang cara membuat segitiga siku-siku sama kaki dengan satu elemen.

• Catatan 1: untuk segitiga non sama kaki dan barang mewah, Anda dapat melihat langkah 4 .
• Catatan 2: dalam cuplikan berikut, awalan vendor tidak termasuk. mereka termasuk dalam demo codepen .
• Catatan 3: HTML untuk penjelasan berikut selalu: <div class="tr"></div>

LANGKAH 1: Buat div

Mudah, pastikan saja width = 1.41 x height. Anda dapat menggunakan teknologi apa pun ( lihat di sini ) termasuk penggunaan persentase dan padding-bottom untuk mempertahankan rasio aspek dan membuat segitiga responsif . Pada gambar berikut, div memiliki perbatasan kuning keemasan.

Dalam div itu, masukkan elemen pseudo dan berikan lebar dan tinggi 100% induk. Elemen pseudo memiliki latar belakang biru pada gambar berikut.

Pada titik ini, kami memiliki CSS ini :

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

LANGKAH 2: Ayo putar

Pertama, paling penting: mendefinisikan asal transformasi . The asal standar adalah di tengah elemen semu dan kami membutuhkannya di bagian kiri bawah. Dengan menambahkan CSS ini ke elemen pseudo:

transform-origin:0 100%; atau transform-origin: left bottom;

Sekarang kita dapat memutar elemen pseudo 45 derajat searah jarum jam dengan transform : rotate(45deg);

Pada titik ini, kami memiliki CSS ini :

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

LANGKAH 3: sembunyikan

Untuk menyembunyikan bagian yang tidak diinginkan dari elemen semu (semua yang meluap div dengan batas kuning) Anda hanya perlu mengatur overflow:hidden;pada wadah. setelah menghapus perbatasan kuning, Anda mendapatkan ... SEGITIGA ! :

DEMO

CSS:

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

LANGKAH 4: melangkah lebih jauh ...

Seperti yang ditunjukkan dalam demo , Anda dapat menyesuaikan segitiga:

1. Buat mereka lebih tipis atau lebih bagus dengan bermain bersama skewX().
2. Buat mereka mengarah ke kiri, kanan atau ke arah lain dengan bermain dengan orign transform dan arah rotasi.
3. Buat beberapa refleksi dengan properti transformasi 3D.
4. Berikan batas segitiga
5. Letakkan gambar di dalam segitiga
6. Jauh lebih banyak ... Lepaskan kekuatan CSS3 !

Mengapa menggunakan teknik ini?

1. Segitiga dapat dengan mudah responsif.
2. Anda dapat membuat segitiga dengan batas .
3. Anda dapat mempertahankan batas segitiga. Ini berarti bahwa Anda dapat memicu negara melayang atau mengklik acara hanya ketika kursor berada di dalam segitiga . Ini dapat menjadi sangat berguna dalam beberapa situasi seperti ini di mana setiap segitiga tidak dapat menutupi tetangganya sehingga setiap segitiga memiliki status hover sendiri.
4. Anda dapat membuat beberapa efek mewah seperti pantulan .
5. Ini akan membantu Anda memahami properti transformasi 2d dan 3d.

Mengapa tidak menggunakan teknik ini?

1. Kelemahan utama adalah kompatibilitas browser , properti transformasi 2d didukung oleh IE9 + dan oleh karena itu Anda tidak dapat menggunakan teknik ini jika Anda berencana mendukung IE8. Lihat CanIuse untuk info lebih lanjut. Untuk beberapa efek mewah menggunakan transformasi 3d seperti dukungan browser refleksi adalah IE10 + (lihat canIuse untuk info lebih lanjut).
2. Anda tidak memerlukan apa pun yang responsif dan segitiga polos baik-baik saja bagi Anda, maka Anda harus menggunakan teknik perbatasan yang dijelaskan di sini: kompatibilitas browser yang lebih baik dan lebih mudah dipahami berkat posting amaizing di sini.

Berikut ini adalah animasi di JSFiddle yang saya buat untuk demonstrasi.

Lihat juga cuplikan di bawah.

Ini adalah GIF Animasi yang dibuat dari Screencast

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>

Versi acak

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

Versi sekaligus

$('#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>

Katakanlah kita memiliki div berikut:

<div id="triangle" />

Sekarang Edit CSS langkah demi langkah, sehingga Anda akan mendapatkan ide yang jelas tentang apa yang terjadi

LANGKAH 1: Tautan 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;
    }

Ini adalah div sederhana. Dengan CSS yang sangat sederhana. Jadi orang awam bisa mengerti. Div memiliki dimensi 150 x 150 piksel dengan batas 50 piksel. Gambar terlampir:

LANGKAH 2: JSfiddle Link:

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

Sekarang saya baru saja mengubah warna perbatasan keempat sisi. Gambar terlampir.

LANGKAH: 3 Link 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;
}

Sekarang saya baru saja mengubah tinggi & lebar div dari 150 piksel menjadi nol. Gambar terlampir

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

Sekarang saya telah membuat semua perbatasan transparan dari batas bawah. Gambar terlampir di bawah ini.

LANGKAH 5: JSfiddle Link:

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

Sekarang saya hanya mengubah warna latar menjadi putih. Gambar terlampir.

Karena itu kami mendapat segitiga yang kami butuhkan.

Dan sekarang sesuatu yang sama sekali berbeda ...

Alih-alih menggunakan trik css jangan lupa tentang solusi sesederhana entitas html:

▲

Hasil:

▲

Lihat: Apa entitas HTML untuk segitiga naik dan turun?

Perhatikan segitiga di bawah ini

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

Inilah yang diberikan kepada kita:

Mengapa itu muncul dalam bentuk ini? Diagram di bawah ini menjelaskan dimensi, perhatikan bahwa 15px digunakan untuk batas bawah dan 10px digunakan untuk kiri dan kanan.

Cukup mudah untuk membuat segitiga sudut kanan juga dengan menghapus batas kanan.

Mengambil satu langkah lebih jauh, menggunakan css berdasarkan ini saya menambahkan panah ke belakang dan tombol berikutnya (ya saya tahu itu bukan 100% lintas-browser, tetapi tidak ada yang kurang kurang).

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

OK, segitiga ini akan dibuat karena cara yang membatasi elemen bekerja bersama dalam HTML dan CSS ...

Karena kami biasanya menggunakan batas 1 atau 2px, kami tidak pernah melihat bahwa tepi membuat sudut 45 ° satu sama lain dengan lebar yang sama dan jika lebar berubah, derajat sudut juga berubah, jalankan kode CSS yang saya buat di bawah ini:

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

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

Kemudian pada langkah berikutnya, kami tidak memiliki lebar atau tinggi, seperti ini:

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

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

Dan sekarang kita membuat batas kiri dan kanan tidak terlihat untuk membuat segitiga yang diinginkan seperti di bawah ini:

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

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

Jika Anda tidak ingin menjalankan cuplikan untuk melihat langkah-langkahnya, saya telah membuat urutan gambar untuk melihat semua langkah dalam satu gambar:

Pendekatan yang berbeda. Dengan gradien linier (untuk IE, hanya IE 10+). Anda dapat menggunakan sudut apa pun:

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

Ini jsfiddle

CSS clip-path

Ini adalah sesuatu yang saya rasa pertanyaan ini telah terjawab; clip-path

clip-path pendeknya

Kliping, dengan clip-pathproperti, mirip dengan memotong bentuk (seperti lingkaran atau pentagon) dari selembar kertas persegi panjang. Properti ini memiliki spesifikasi " CSS Masking Module Level 1 ". Negara tersebut menyatakan, "Penyembunyian CSS menyediakan dua cara untuk sebagian atau seluruhnya menyembunyikan elemen visual: penyembunyian dan kliping".

• Ekstrak dari Majalah Smashing

clip-pathakan menggunakan elemen itu sendiri daripada perbatasannya untuk memotong bentuk yang Anda tentukan dalam parameternya. Ini menggunakan sistem koordinat berbasis persentase super sederhana yang membuat pengeditan menjadi sangat mudah dan berarti Anda dapat mengambilnya dan membuat bentuk yang aneh dan luar biasa dalam hitungan menit.

Contoh Bentuk Segitiga

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>

Kekurangannya

Itu memang memiliki kelemahan utama saat ini, salah satunya adalah kurangnya dukungan, hanya benar-benar dibahas di dalam -webkit-browser dan tidak memiliki dukungan pada IE dan hanya sangat parsial di FireFox.

Sumber daya

Berikut adalah beberapa sumber dan bahan yang berguna untuk membantu lebih memahami clip-pathdan juga mulai membuat sendiri.

• Clippy - clip-pathGenerator
• File Rekomendasi Kandidat W3C
• clip-pathDokumentasi MDN
• clip-path Dukungan Browser

Ini adalah pertanyaan lama, tapi saya pikir akan sangat berharga untuk berbagi cara membuat panah menggunakan teknik segitiga ini.

Langkah 1:

Mari kita buat 2 segitiga, untuk yang kedua kita akan menggunakan :afterpseudo class dan menempatkannya tepat di bawah yang lain:

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

Langkah 2

Sekarang kita hanya perlu mengatur warna perbatasan dominan dari segitiga kedua dengan warna latar yang sama:

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

Biasakan dengan semua panah:
http://jsfiddle.net/tomsarduy/r0zksgeu/

SASS (SCSS) mixin segitiga

Saya menulis ini untuk membuatnya lebih mudah (dan KERING) untuk secara otomatis menghasilkan segitiga CSS:

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

contoh penggunaan-kasus:

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

Halaman taman bermain

Catatan penting:
jika segitiga tampak pixel di beberapa browser, coba salah satu metode yang dijelaskan di sini .

^{Jika Anda ingin menerapkan batas pada segitiga baca ini: Buat segitiga dengan CSS?}

Hampir semua jawaban fokus pada segitiga yang dibangun menggunakan batas jadi saya akan menguraikan linear-gradientmetode (seperti yang dimulai pada jawaban @ lima_fil ).

Menggunakan nilai derajat seperti 45°akan memaksa kita untuk menghormati rasio tertentu height/widthuntuk mendapatkan segitiga yang kita inginkan dan ini tidak akan responsif:

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

Alih-alih melakukan hal ini kita harus mempertimbangkan nilai-nilai yang telah ditetapkan dari arah seperti to bottom,to top , dll Dalam hal ini kita dapat memperoleh segala jenis bentuk segitiga sambil menjaga responsif.

1) Segitiga persegi panjang

Untuk mendapatkan segitiga seperti kita perlu satu linear-gradient dan arah diagonal seperti to bottom right, to top left, to bottom left, dll

.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) segitiga sama kaki

Untuk yang ini kita akan membutuhkan 2 linear-gradient seperti di atas dan masing-masing akan mengambil setengah lebar (atau ketinggian). Ini seperti kita membuat gambar cermin dari segitiga pertama.

.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) segitiga sama sisi

Yang ini agak sulit untuk ditangani karena kita perlu menjaga hubungan antara tinggi dan lebar gradien. Kami akan memiliki segitiga yang sama seperti di atas, tetapi kami akan membuat perhitungan lebih kompleks untuk mengubah segitiga sama kaki menjadi segitiga sama sisi.

Untuk membuatnya mudah, kami akan mempertimbangkan bahwa lebar div kami diketahui dan tingginya cukup besar untuk dapat menggambar segitiga kami di dalam ( height >= width).

Kami memiliki dua gradien kami g1dan g2, garis biru adalah lebar div wdan masing-masing gradien akan memiliki 50% dari itu ( w/2) dan setiap sisi dari segitiga harus sama dengan w. Garis hijau adalah ketinggian dari kedua gradien hgdan kita dapat dengan mudah mendapatkan rumus di bawah ini:

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

Kita dapat mengandalkan calc()untuk melakukan perhitungan kita dan untuk mendapatkan hasil yang dibutuhkan:

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

Cara lain adalah dengan mengontrol ketinggian div dan menjaga sintaks gradien mudah:

.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) Segitiga acak

Untuk mendapatkan segitiga acak, mudah karena kita hanya perlu menghapus kondisi 50% dari masing-masing TETAPI kita harus menjaga dua kondisi (keduanya harus memiliki tinggi yang sama dan jumlah kedua lebar harus 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>

Tetapi bagaimana jika kita ingin mendefinisikan nilai untuk setiap sisi? Kami hanya perlu melakukan perhitungan lagi!

Mari kita tentukan hg1dan hg2sebagai ketinggian gradien kita (keduanya sama dengan garis merah) lalu wg1dan wg2sebagai lebar gradien kita ( wg1 + wg2 = a). Saya tidak akan merinci perhitungannya tetapi pada akhirnya kami akan memiliki:

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

Sekarang kita telah mencapai batas CSS bahkan dengan calc()kita tidak akan dapat mengimplementasikan ini sehingga kita hanya perlu mengumpulkan hasil akhir secara manual dan menggunakannya sebagai ukuran tetap:

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

Bonus

Kita tidak boleh lupa bahwa kita juga dapat menerapkan rotasi dan / atau condong dan kami memiliki lebih banyak opsi untuk mendapatkan lebih banyak segitiga:

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

Dan tentu saja kita harus mengingat solusi SVG yang dapat lebih cocok dalam beberapa situasi:

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>

ini biola yang lain:

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

Yang lain sudah menjelaskan ini dengan baik. Biarkan saya memberi Anda animasi yang akan menjelaskan ini dengan cepat: http://codepen.io/chriscoyier/pen/lotjh

Berikut adalah beberapa kode untuk Anda mainkan dan pelajari konsepnya.

HTML:

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

CSS:

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

Mainkan ini dan lihat apa yang terjadi. Atur tinggi dan lebar menjadi nol. Kemudian hapus batas atas dan buat transparan kiri dan kanan, atau cukup lihat kode di bawah ini untuk membuat segitiga css:

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

Jika Anda ingin bermain-main dengan border-size, widthdan heightdan melihat bagaimana mereka dapat membuat bentuk yang berbeda, coba ini:

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>

Coba ini:-

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

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

Saya tahu ini sudah lama, tapi saya ingin menambahkan diskusi ini bahwa Setidaknya ada 5 metode berbeda untuk membuat segitiga menggunakan HTML & CSS saja.

1. Menggunakan borders
2. Menggunakan linear-gradient
3. Menggunakan conic-gradient
4. Menggunakan transform danoverflow
5. Menggunakan clip-path

Saya pikir semua sudah dibahas di sini kecuali untuk metode 3, menggunakan conic-gradient, jadi saya akan membagikannya di sini:

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

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