Câu hỏi CSS tam giác hoạt động như thế nào?


Có rất nhiều hình dạng CSS khác nhau tại CSS Tricks - Hình dạng của CSS và tôi đặc biệt bối rối với một hình tam giác:

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>

Làm thế nào và tại sao nó hoạt động?


1637
2017-08-16 03:54


gốc


Câu hỏi tuyệt vời! Nó thậm chí còn ấn tượng hơn nếu có thể vẽ một hình tam giác đều;) - Abel
Bạn có thể: jsfiddle.net/wbZet - mskfisher
Làm thế nào về hình vuông mà không có? jsfiddle.net/minitech/sZgaa - Ry-♦
Nó đơn giản, thay đổi 'red' thành 'blue' và tam giác sẽ có màu xanh :-) - Ofer Zelig
Một người bạn của tôi có một trang với một lời giải thích và một ứng dụng sử dụng nó để xây dựng các đối tượng 3D: uselesspickles.com/triangles - Juan Mendes


Các câu trả lời:


CSS Tam giác: Một bi kịch trong năm hành vi

Như alex nói, các đường viền có chiều rộng ngang bằng nhau với nhau ở góc 45 độ:

borders meet at 45 degree angles, content in middle

Khi bạn không có đường viền trên cùng, có vẻ như sau:

no top border

Sau đó, bạn cho nó một chiều rộng là 0 ...

no width

... và chiều cao là 0 ...

no height either

... và cuối cùng, bạn làm cho hai cạnh biên giới trong suốt:

transparent side borders

Điều đó dẫn đến một tam giác.


2057
2017-08-16 04:11



@ Jauzsika, bạn có thể thêm các hình tam giác này vào một trang mà không cần thêm các phần tử bổ sung chỉ đơn giản bằng cách sử dụng :before hoặc là :after các lớp giả. - zzzzBov
@zzzzBov: phần tử giả. - BoltClock♦
stackoverflow.com/questions/5623072/… là tôi nghĩ rằng những gì ông BoltClock đề cập đến. - thirtydot
Minh họa đẹp. Bây giờ bạn có thể làm điều đó trong CSS? - ikdc
Hành động với hoạt ảnh: jsfiddle.net/pimvdb/mA4Cu/104. Chỉ cho những ai trong chúng ta cần chứng minh trực quan hơn như tôi ... - pimvdb


Các đường viền sử dụng một cạnh góc cạnh mà chúng giao nhau (góc 45 ° với các đường viền có chiều rộng bằng nhau, nhưng việc thay đổi độ rộng đường viền có thể nghiêng góc).

Border example

jsFiddle.

Bằng cách ẩn một số đường viền nhất định, bạn có thể nhận được hiệu ứng hình tam giác (như bạn có thể thấy ở trên bằng cách tạo các phần khác nhau màu sắc khác nhau). transparent thường được sử dụng như một màu cạnh để đạt được hình dạng tam giác.


486
2017-08-16 03:58





Bắt đầu với hình vuông và đường viền cơ bản. Mỗi đường viền sẽ có một màu khác nhau để chúng ta có thể phân biệt chúng:

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

mang đến cho bạn điều này:

square with four borders

Nhưng không cần biên giới hàng đầu, vì vậy hãy đặt chiều rộng của nó thành 0px. Bây giờ phần dưới cùng của chúng tôi là 200px sẽ làm cho hình tam giác của chúng ta cao 200px.

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

và chúng tôi sẽ nhận được điều này:

bottom half of square with four borders

Sau đó, để ẩn hai tam giác bên, đặt màu đường viền thành trong suốt. Vì đường viền trên cùng đã bị xóa một cách hiệu quả, chúng ta cũng có thể thiết lập đường viền trên cùng thành màu trong suốt.

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

cuối cùng chúng tôi nhận được điều này:

triangular bottom border


437
2017-08-17 11:16



Thật tuyệt, nhưng không phải thế này giống nhau đường? :-) - Stanislav Shabalin
There's another way to draw .., mà hóa ra là cùng một cách :) Nice giải thích mặc dù - Hammad Khan
-1 để sử dụng JPEG với các đồ tạo tác lớn. Nhưng +1 để tạo một ví dụ tuyệt vời khi không sử dụng các ảnh JPEG mà tôi có thể liên kết đến trong tương lai để ngăn chặn. ;) - Henrik Heimbuerger
tại sao không phải là một gif được sử dụng thay vào đây? - prusswan
Xin lỗi @hheimbuerger, tôi đã làm hỏng ví dụ của bạn bằng cách sửa hình ảnh. Bạn sẽ phải liên kết tới sửa đổi 2 của câu trả lời này trong tương lai. - Rory O'Kane


Phương pháp khác nhau:

Hình tam giác CSS3 với biến đổi xoay

Hình tam giác là khá dễ dàng để thực hiện bằng cách sử dụng kỹ thuật này. Đối với những người thích xem hoạt hình giải thích cách kỹ thuật này hoạt động ở đây, đó là:

gif animation : how to make a triangle with transform rotate

Nếu không, đây là giải thích chi tiết trong 4 hành vi (đây không phải là bi kịch) về cách làm cho một tam giác vuông góc với một phần tử.

  • Lưu ý 1: đối với các hình tam giác không cân xứng và các công cụ ưa thích, bạn có thể thấy bước 4.
  • Lưu ý 2: trong các đoạn mã sau, tiền tố của nhà cung cấp không được bao gồm. chúng được bao gồm trong bản trình diễn codepen.
  • Lưu ý 3: HTML cho lời giải thích sau đây luôn là:  <div class="tr"></div>

BƯỚC 1 : Tạo một div

Dễ dàng, chỉ cần đảm bảo rằng width = 1.41 x height. Bạn có thể sử dụng bất kỳ techinque (xem ở đây) bao gồm việc sử dụng tỷ lệ phần trăm và phần đệm phía dưới để duy trì tỷ lệ khung hình và tạo tam giác đáp ứng. Trong hình dưới đây, div có đường viền màu vàng vàng.

Trong div đó, chèn một -phần tử giả và cung cấp cho nó 100% chiều rộng và chiều cao của phụ huynh. Phần tử giả có nền màu xanh trong hình dưới đây.

Making a CSS triangle with transform roate step 1

Tại thời điểm này, chúng tôi có điều này 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;
}

BƯỚC 2 : Hãy xoay

Đầu tiên, quan trọng nhất: xác định nguồn gốc biến đổi. Các nguồn gốc mặc định nằm ở trung tâm của phần tử giả và chúng ta cần nó ở phía dưới bên trái. Bằng cách thêm mục này CSS với phần tử giả:

transform-origin:0 100%; hoặc là transform-origin: left bottom;

Bây giờ chúng ta có thể xoay phần tử giả 45 độ theo chiều kim đồng hồ với transform : rotate(45deg);

Creating a triangle with CSS3 step 2

Tại thời điểm này, chúng tôi có điều này 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);
}

BƯỚC 3: ẩn nó đi

Để ẩn các phần không mong muốn của phần tử giả (mọi thứ tràn qua div với đường viền màu vàng), bạn chỉ cần đặt overflow:hidden; trên thùng chứa. sau khi tháo đường viền màu vàng, bạn sẽ ... TAM GIÁC! :

BẢN GIỚI THIỆU

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

BƯỚC 4: đi xa hơn ...

Như thể hiện trong bản giới thiệu, bạn có thể tùy chỉnh hình tam giác:

  1. Làm cho chúng mỏng hơn hoặc phẳng hơn bằng cách chơi với skewX().
  2. Làm cho chúng trỏ sang trái, phải hoặc bất kỳ hướng nào khác bằng cách chơi với hướng chuyển đổi orign và xoay.
  3. Chế tạo một số phản xạ với thuộc tính biến đổi 3D.
  4. Đưa ra đường viền tam giác
  5. Đặt hình ảnh bên trong tam giác
  6. Nhiều hơn nữa ... Giải phóng sức mạnh của CSS3!

Tại sao sử dụng kỹ thuật này?

  1. Tam giác có thể dễ dàng đáp ứng.
  2. Bạn có thể làm một tam giác có đường viền.
  3. Bạn có thể duy trì ranh giới của tam giác. Điều này có nghĩa là bạn có thể kích hoạt trạng thái di chuột hoặc sự kiện nhấp chỉ khi con trỏ bên trong tam giác. Điều này có thể trở nên rất tiện dụng trong một số tình huống như cái này trong đó mỗi tam giác không thể phủ lên hàng xóm của nó sao cho mỗi tam giác có trạng thái di chuột riêng của nó.
  4. Bạn có thể làm một số hiệu ứng lạ mắt như phản xạ.
  5. Nó sẽ giúp bạn hiểu các thuộc tính biến đổi 2d và 3d.

Tại sao không sử dụng kỹ thuật này?

  1. Hạn chế chính là tính tương thích của trình duyệt web, các thuộc tính biến đổi 2d được hỗ trợ bởi IE9 + và do đó bạn không thể sử dụng kỹ thuật này nếu bạn có kế hoạch hỗ trợ IE8. Xem CanIuse để biết thêm thông tin. Đối với một số hiệu ứng ưa thích bằng cách sử dụng các biến đổi 3d như sự phản ánh hỗ trợ trình duyệt là IE10 + (xem canIuse để biết thêm thông tin).
  2. Bạn không cần bất cứ điều gì đáp ứng và một tam giác đồng bằng là tốt cho bạn thì bạn nên đi cho các kỹ thuật biên giới giải thích ở đây: khả năng tương thích trình duyệt tốt hơn và dễ hiểu hơn nhờ các bài viết amaizing ở đây.

215
2017-07-17 16:30



Có lẽ đáng nói đến là 1,41 là xấp xỉ √2 và chiều dài của cạnh huyền của tam giác mà bạn tạo ra, đó là lý do tại sao bạn cần (ít nhất) chiều rộng đó. - KRyan
Tôi muốn giữ câu trả lời đơn giản nhưng bạn nói đúng, nó nên được đề cập @KRyan - web-tiki
Trên thực tế, khi cố gắng sử dụng điều này, hãy đề cập đến cách các chiều rộng khác nhau để sử dụng với skewX được bắt nguồn sẽ hữu ích. - KRyan
Phương pháp này hoạt động tốt hơn khi bạn cần 1px viền cứng cho tam giác. - Roman Losev
Wow cho rằng hình ảnh động. Một ví dụ thực sự của một bức tranh có thể nói 1000 từ! - Gaurav Ramanan


Đây là một hoạt hình trong JSFiddle Tôi đã tạo ra để trình diễn.

Ngoài ra, hãy xem đoạn mã bên dưới.

Đây là một Animated GIF được tạo từ 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>


Phiên bản ngẫu nhiên

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


Tất cả cùng một lúc

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


157
2017-11-29 11:21





Cho phép nói rằng chúng tôi có div sau đây:

<div id="triangle" />

Bây giờ chỉnh sửa CSS từng bước, vì vậy bạn sẽ có được ý tưởng rõ ràng những gì đang xảy ra xung quanh

BƯỚC 1: Liên kết 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;
    }

Đây là một div đơn giản. Với một CSS rất đơn giản. Vì vậy, một giáo dân có thể hiểu được. Div có kích thước 150 x 150 pixel với đường viền 50 pixel. Hình ảnh được đính kèm:

enter image description here

BƯỚC 2:  Liên kết 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;
}

Bây giờ tôi chỉ thay đổi màu viền của cả 4 mặt. Hình ảnh được đính kèm.

enter image description here

BƯỚC 3  Liên kết 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;
}

Bây giờ tôi chỉ thay đổi chiều cao và chiều rộng của div từ 150 pixel thành 0. Hình ảnh được đính kèm

enter image description here

BƯỚC 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;
}

Bây giờ tôi đã làm cho tất cả các đường viền trong suốt ngoài biên giới phía dưới. Hình ảnh được đính kèm bên dưới.

enter image description here

BƯỚC 5:  Liên kết 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;
}

Bây giờ tôi đã thay đổi màu nền thành trắng. Hình ảnh được đính kèm.

enter image description here

Do đó chúng tôi có hình tam giác mà chúng tôi cần.


40
2018-06-17 06:09





Và bây giờ một cái gì đó hoàn toàn khác ...

Thay vì sử dụng thủ thuật css đừng quên các giải pháp đơn giản như các thực thể html:

&#9650;

Kết quả:

Xem: Các thực thể HTML cho hình tam giác lên và xuống là gì?


35
2017-12-01 12:40



Tôi không nghĩ rằng "đánh đập" là một từ thích hợp ở đây. Giải pháp dựa trên các chỉ số phông chữ, do đó vị trí chính xác khá đáng ngờ, chưa kể rằng bạn không có quyền kiểm soát hình dạng. - user776686


Xem xét hình tam giác bên dưới

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

Đây là những gì chúng tôi được cung cấp:

Small triangle output

Tại sao nó xuất hiện trong hình dạng này? Biểu đồ dưới đây giải thích các kích thước, lưu ý rằng 15px được sử dụng cho đường viền dưới cùng và 10px được sử dụng cho trái và phải.

Large triangle

Nó khá dễ dàng để làm cho một tam giác góc vuông cũng bằng cách loại bỏ các biên giới bên phải.

Right angle triangle


29
2018-03-21 11:20