Pertanyaan Bagaimana cara kerja CSS segitiga?


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

CSS Triangle

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


1633
2017-08-16 03:54


asal


Jawaban:


CSS Segitiga: Tragedi dalam Lima Kisah

Sebagai kata alex, berbatasan dengan lebar yang sama saling bertumpukan pada sudut 45 derajat:

borders meet at 45 degree angles, content in middle

Bila Anda tidak memiliki batas atas, tampilannya seperti ini:

no top border

Maka Anda memberikannya lebar 0 ...

no width

... dan ketinggian 0 ...

no height either

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

transparent side borders

Itu menghasilkan segitiga.


2054
2017-08-16 04:11



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

Border example

jsFiddle.

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


484
2017-08-16 03:58



Mulailah dengan kotak dan batas dasar. Setiap perbatasan akan diberi warna yang berbeda sehingga kita 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:

square with four borders

Tapi tidak perlu ada batas atas, jadi atur lebarnya 0px. Sekarang batas bawah kami 200px akan membuat tinggi segitiga kita 200px.

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

dan kita akan dapatkan ini:

bottom half of square with four borders

Kemudian untuk menyembunyikan dua sisi segitiga, atur warna batas menjadi transparan. Karena batas atas telah dihapus secara efektif, kita dapat mengatur warna batas 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 kita dapatkan ini:

triangular bottom border


436
2017-08-17 11:16



Pendekatan yang berbeda:

Segitiga CSS3 dengan mengubah memutar

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

gif animation : how to make a triangle with transform rotate

Jika tidak, di sini adalah penjelasan terperinci dalam 4 tindakan (ini bukan tragedi) tentang bagaimana membuat segitiga siku-siku siku-siku dengan satu elemen.

  • Catatan 1: untuk segitiga yang tidak sama kaki dan barang mewah, Anda dapat melihat langkah 4.
  • Catatan 2: di cuplikan berikut, awalan vendor tidak disertakan. 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 techinque apa pun (Lihat disini) termasuk penggunaan persentase dan padding-bottom untuk mempertahankan aspek rasio dan membuat a segitiga responsif. Pada gambar berikut, div memiliki perbatasan kuning keemasan.

Di dalam div itu, masukkan a elemen semu dan berikan lebar dan tinggi 100% dari orang tua. Elemen pseudo memiliki latar belakang biru di gambar berikut.

Making a CSS triangle with transform roate step 1

Pada titik ini, kita punya ini CSS :

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

Pertama, paling penting: mendefinisikan asal transformasi. Itu asal default berada di pusat elemen pseudo dan kita membutuhkannya di kiri bawah. Dengan menambahkan ini CSS ke elemen pseudo:

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

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

Creating a triangle with CSS3 step 2

Pada titik ini, kita punya ini CSS :

.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 (segala sesuatu yang membanjiri div dengan perbatasan kuning) Anda hanya perlu mengatur overflow:hidden; di kontainer. setelah menghapus perbatasan kuning, Anda mendapatkan ... a SEGI TIGA! :

DEMO

CSS triangle

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 pada demo, Anda dapat menyesuaikan segitiga:

  1. Buat mereka lebih tipis atau lebih datar dengan bermain skewX().
  2. Buat mereka mengarah ke kiri, kanan atau arah lain dengan bermain dengan arah orign dan rotasi transformasi.
  3. Membuat beberapa refleks dengan properti transformasi 3D.
  4. Berikan perbatasan segitiga
  5. Letakkan gambar di dalam segitiga
  6. Banyak lagi ... Singkirkan kekuatan CSS3!

Mengapa menggunakan teknik ini?

  1. Segitiga dapat dengan mudah menjadi responsif.
  2. Anda bisa membuat segitiga dengan batas.
  3. Anda dapat mempertahankan batas-batas segitiga. Ini berarti bahwa Anda dapat memicu status hover atau klik peristiwa hanya ketika kursor berada di dalam segitiga. Ini bisa menjadi sangat berguna dalam beberapa situasi seperti yang ini di mana setiap segitiga tidak dapat melapisi tetangga-tetangganya sehingga setiap segitiga memiliki status hover sendiri.
  4. Anda bisa membuatnya 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 karena itu Anda tidak dapat menggunakan teknik ini jika Anda berencana untuk mendukung IE8. Lihat CanIuse untuk info lebih lanjut. Untuk beberapa efek mewah menggunakan transformasi 3d seperti pantulan Dukungan browser adalah IE10 + (lihat canIuse untuk info lebih lanjut).
  2. Anda tidak perlu sesuatu yang responsif dan segitiga polos baik-baik saja untuk Anda maka Anda harus pergi untuk teknik perbatasan yang dijelaskan di sini: kompatibilitas browser yang lebih baik dan lebih mudah dipahami berkat posting amaizing di sini.

214
2017-07-17 16:30



Ini adalah sebuah animasi di JSFiddle Saya buat untuk demonstrasi.

Lihat juga potongan di bawah ini.

Ini adalah GIF Animasi yang dibuat dari Screencast

Animated Gif of Triangle

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>


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


156
2017-11-29 11:21



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 di sekitar

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 yang sederhana. Dengan CSS yang sangat sederhana. Jadi orang awam bisa mengerti. Div memiliki dimensi 150 x 150 piksel dengan batas 50 piksel. Gambar terlampir:

enter image description here

LANGKAH 2:  Tautan JSfiddle:

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

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

enter image description here

LANGKAH: 3  Tautan 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 ke nol. Gambar terlampir

enter image description here

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 terpisah dari perbatasan bawah. Gambar dilampirkan di bawah ini.

enter image description here

LANGKAH 5:  Tautan JSfiddle:

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

Sekarang saya baru saja mengubah warna latar belakang menjadi putih. Gambar terlampir.

enter image description here

Oleh karena itu kami mendapatkan segitiga yang kami butuhkan.


39
2018-06-17 06:09



Dan sekarang sesuatu yang sangat berbeda ...

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

&#9650;

Hasil:

Lihat: Apa entitas HTML untuk segitiga naik dan turun?


35
2017-12-01 12:40



Pertimbangkan 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 kami berikan:

Small triangle output

Mengapa bentuknya seperti ini? Diagram di bawah ini menjelaskan dimensi, perhatikan bahwa 15px digunakan untuk batas bawah dan 10px digunakan untuk kiri dan kanan.

Large triangle

Ini sangat mudah untuk membuat segitiga siku-siku juga dengan menghapus batas kanan.

Right angle triangle


29
2018-03-21 11:20



Mengambil satu langkah lebih jauh, menggunakan css berdasarkan ini saya menambahkan panah ke punggung saya dan tombol berikutnya (ya saya tahu itu bukan 100% lintas-browser, tetapi tidak ada apik yang 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>


27
2017-12-30 16:56



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

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

Disini adalah jsfiddle


15
2017-07-26 00:19



Ini adalah pertanyaan lama, tapi saya pikir akan berguna untuk membagikan cara membuat panah menggunakan teknik segitiga ini.

Langkah 1:

Memungkinkan membuat 2 segitiga, untuk yang kedua kita akan menggunakan :after kelas pseudo dan posisinya tepat di bawah yang lain:

2 triangles

.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 batas dominan dari segitiga kedua ke warna latar belakang yang sama:

enter image description here

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

Main-main dengan semua panah:
http://jsfiddle.net/tomsarduy/r0zksgeu/


9
2017-07-31 20:42