Bagaimana cara kerja segitiga CSS?


1847

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

Segitiga CSS

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


59

55
Bagaimana dengan alun-alun yang tidak ada di sana? jsfiddle.net/minitech/sZgaa
Ry-

1
@mskfisher Ukuran batas bawah di segitiga sama sisi Anda tidak boleh langit-langit (sqrt (3) * 60)? Beberapa piksel lebih banyak dari itu!
Niloct

1
@Niloct: Saya melihatnya dengan cepat pada angka bulat. Anda benar, pengukuran sama sisi yang lebih akurat adalah (sisi: 58, bawah: 100) atau (sisi: 60, bawah: 104).
mskfisher

1
Berikut adalah generator segitiga CSS yang hebat untuk setiap arah dan ukuran: apps.eky.hk/css-triangle-generator
Allan Stepps

Jawaban:


2240

CSS Triangles: Tragedi dalam Lima Tindakan

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

perbatasan bertemu pada sudut 45 derajat, konten di tengah

Ketika Anda tidak memiliki batas atas, terlihat seperti ini:

tidak ada batas atas

Maka Anda memberinya lebar 0 ...

tidak ada lebar

... dan ketinggian 0 ...

tidak tinggi juga

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

batas sisi transparan

Itu menghasilkan segitiga.


10
@Jauzsika, Anda dapat menambahkan segitiga ini ke dalam halaman tanpa menambahkan elemen tambahan hanya dengan menggunakan :beforeatau :afterkelas pseudo.
zzzzBov

stackoverflow.com/questions/5623072/… adalah saya pikir apa yang dimaksud oleh Mr. BoltClock.
fiftydot

99
Bertindak dengan animasi: jsfiddle.net/pimvdb/mA4Cu/104 . Hanya untuk kita yang membutuhkan lebih banyak bukti visual seperti saya ...
pimvdb

Dengan segitiga yang berbeda left-borderdan right-border, sama kaki dapat dibuat. Dan ketika banyak segitiga digabungkan ... jsfiddle.net/zRNgz
JiminP

2
Pada tahun 2018, apakah ada cara yang lebih baik untuk membuat segitiga dengan CSS daripada menggunakan peretasan ini?
Scribblemacher

519

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

Contoh perbatasan

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.


487

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 :

persegi dengan empat batas

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 :

bagian bawah persegi dengan empat batas

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 :

batas bawah segitiga


21
Keren, tapi bukankah ini cara yang sama ? :-)
Stanislav Shabalin

5
There's another way to draw .., yang ternyata menjadi cara yang sama :) Penjelasan yang bagus
Hammad Khan

16
-1 untuk menggunakan JPEG dengan artefak masif. Tapi +1 untuk membuat contoh yang bagus tentang kapan tidak menggunakan JPEG yang bisa saya tautkan di masa depan untuk pencegahan. ;)
Henrik Heimbuerger

3
mengapa bukan gif yang digunakan di sini?
prusswan

4
Maaf @hheimbuerger, saya mengacaukan contoh Anda dengan memperbaiki gambar. Anda harus menautkan ke revisi 2 dari jawaban ini di masa mendatang.
Rory O'Kane

263

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:

animasi gif: cara membuat segitiga dengan transformasi rotate

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.

Membuat segitiga CSS dengan mentransformasi roate langkah 1

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

Membuat segitiga dengan CSS3 langkah 2

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

Segitiga CSS

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.

16
Mungkin perlu disebutkan bahwa 1,41 adalah perkiraan √2 dan panjang sisi miring dari segitiga yang Anda buat, itulah sebabnya Anda perlu (setidaknya) lebar itu.
KRyan

Saya ingin menjaga jawabannya tetap sederhana tetapi Anda benar, harus disebutkan @Ryan
web-tiki

Sebenarnya, dalam mencoba menggunakan ini, penyebutan tentang bagaimana perbedaan lebar untuk digunakan dengan skewXditurunkan akan bermanfaat.
KRyan

1
Metode ini berfungsi lebih baik ketika Anda membutuhkan 1px batas solid untuk segitiga.
Roman Losev

Ini untuk kasus Anda ingin membuat batas untuk segitiga, saya terjebak dengan cara perbatasan ketika saya ingin membuat kotak anotasi ini AnnotationBox
vanduc1102

183

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

Lihat juga cuplikan di bawah.

Ini adalah GIF Animasi yang dibuat dari Screencast

Animasi Gif of Triangle


Versi acak


Versi sekaligus


49

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:

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

Karena itu kami mendapat segitiga yang kami butuhkan.


3
Mengapa Anda menggunakan Nether Portal untuk langkah pertama?
LuizLoyola

38

Dan sekarang sesuatu yang sama sekali berbeda ...

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

&#9650;

Hasil:

Lihat: Apa entitas HTML untuk segitiga naik dan turun?


2
Saya tidak berpikir "dipukuli" adalah kata yang tepat di sini. Solusinya bergantung pada metrik font, sehingga penentuan posisi yang tepat agak meragukan, belum lagi Anda tidak memiliki kontrol atas bentuk.
user776686

32

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:

Output segitiga kecil

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.

Segitiga besar

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

Segitiga sudut kanan


29

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>


1
bagaimana ini bukan browser lintas? segitiga harus bekerja kembali ke IE6.
chriscauley

4
penggunaan: sebelum dan: setelah tidak 100% didukung.
PseudoNinja

2
Elemen Psuedo tidak didukung <IE8.
alex

19

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:

masukkan deskripsi gambar di sini


18

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


Ini adalah solusi yang indah, tetapi perlu dicatat bahwa itu hanya IE 10+.
Eric Hu

13

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


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.


11

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:

2 segitiga

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

masukkan deskripsi gambar di sini

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


9

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 .


8

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:

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

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.

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

Segitiga CSS dengan gradien

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:

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

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

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

Segitiga CSS dengan gradien

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:

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:

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


4

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/


4

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

2

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>


1

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>


0

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>

Buat Segitiga CSS Menggunakan Conic Gradient

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.