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

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

CSS Triangles: Một bi kịch trong năm đạo luật

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

Khi bạn không có đường viền trên cùng, nó sẽ trông như thế này:

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

... và chiều cao bằng 0 ...

... Và cuối cùng, bạn làm cho đường viền hai bên trong suốt:

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

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

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

<div></div>

Có một cái nhìn đến jsFiddle .

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

Bắt đầu với một hình vuông và đường viền cơ bản. Mỗi đường viền sẽ được cung cấp 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;
}

cung cấp cho bạn điều này :

Nhưng không cần đường viền trên cùng, vì vậy hãy đặt chiều rộng của nó thành 0px. Bây giờ, đường viền dưới cùng của 200pxchúng ta 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 ta sẽ có được điều này :

Sau đó, để ẩn các hình tam giác hai bên, đặt màu 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 tôi cũng có thể đặt màu đường viền trên cùng thành 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 ta cũng nhận được điều này :

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

Tam giác CSS3 với phép quay biến đổi

Hình dạng 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 thức hoạt động của kỹ thuật này ở đây:

• Liên kết với ANIMATION: Cách tạo tam giác CSS3 .
• Và DEMO: CSS3 tam giác được thực hiện với phép quay biến đổi.

Mặt khác, đây là lời giải thích chi tiết trong 4 hành vi (đây không phải là một bi kịch) về cách tạo ra một tam giác vuông cân bằng với một yếu tố.

• Lưu ý 1: đối với các hình tam giác không cân và các vật lạ mắt, bạn có thể xem 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 các bản demo codepen .
• Lưu ý 3: HTML cho lời giải thích sau luôn luôn là: <div class="tr"></div>

BƯỚC 1: Tạo div

Dễ dàng, chỉ cần chắc chắn rằng width = 1.41 x height. Bạn có thể sử dụng bất kỳ techinque nào ( xem tại đây ) bao gồm cả việc sử dụng tỷ lệ phần trăm và phần đệm dưới cùng để duy trì tỷ lệ khung hình và tạo ra một tam giác đáp ứng . Trong hình ảnh sau đây, div có 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 cha. Phần tử giả có nền màu xanh lam trong hình ảnh sau đây.

Tại thời điểm này, chúng tôi có CSS này :

.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 một 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 CSS này vào 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);

Tại thời điểm này, chúng tôi có CSS này :

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

Để ẩ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 viền màu vàng), bạn chỉ cần đặt overflow:hidden;vào vùng chứa. sau khi xóa đường viền màu vàng, bạn nhận được ... một TRÍ TUỆ ! :

BẢN GIỚI THIỆU

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ư được hiển thị trong bản demo , bạn có thể tùy chỉnh các 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 chỉ 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 và hướng xoay.
3. Thực hiện một số phản xạ với thuộc tính biến đổi 3D.
4. Cho đường viền tam giác
5. Đặt mộ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 được đáp ứng.
2. Bạn có thể tạo một hình tam giác với đườ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 nhấp vào sự kiện chỉ khi con trỏ ở trong tam giác . Điều này có thể trở nên rất tiện dụng trong một số trường hợp như thế này khi mỗi tam giác không thể che phủ các hàng xóm của nó để mỗi tam giác có trạng thái di chuột riêng.
4. Bạn có thể thực hiện một số hiệu ứng lạ mắt như phản chiếu .
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à khả năng tương thích trình duyệt , thuộc tính biến đổi 2d được IE9 + hỗ trợ 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. Đối với một số hiệu ứng ưa thích sử dụng các biến đổi 3d như hỗ trợ trình duyệt phản chiếu 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 đơn giản là tốt cho bạn thì bạn nên sử dụng kỹ thuật viền được 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 đăng ở đây.

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

Cũng xem đoạn trích dưới đây.

Đây là một GIF hoạt hình được làm từ 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>

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 phiên bản

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

Hãy nói rằng chúng ta có div sau:

<div id="triangle" />

Bây giờ Chỉnh sửa từng bước CSS, vì vậy bạn sẽ hiểu rõ 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 cư sĩ có thể hiểu. Div có kích thước 150 x 150 pixel với viền 50 pixel. Hình ảnh được đính kèm:

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.

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

BƯỚC 4: Mã hóa:

#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 đường viền dưới cùng. Hình ảnh được đính kèm bên dưới.

BƯỚC 5: Liên kết mã hóa:

#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 chỉ thay đổi màu nền thành màu trắng. Hình ảnh được đính kèm.

Do đó, chúng tôi có tam giác chúng tôi cần.

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

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

▲

Kết quả:

▲

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

Hãy xem xét tam giác dưới đây

.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 đưa ra:

Tại sao nó đi ra 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 viền dưới và 10px được sử dụng cho trái và phải.

Thật dễ dàng để tạo một tam giác góc vuông bằng cách loại bỏ đường viền bên phải.

Tiến lên một bước nữa, sử dụng css dựa trên điều này, tôi đã thêm mũi tên vào các nút quay lại và tiếp theo của mình (vâng tôi biết nó không phải là trình duyệt chéo 100%, nhưng không thua kém gì).

.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, tam giác này sẽ được tạo vì cách các đường viền của các phần tử phối hợp với nhau trong HTML và CSS ...

Vì chúng ta thường sử dụng các đường viền 1 hoặc 2px, chúng ta không bao giờ nhận thấy rằng các đường viền tạo góc 45 ° với nhau có cùng chiều rộng và nếu chiều rộng thay đổi, độ góc cũng bị thay đổi, hãy chạy mã CSS mà tôi đã tạo bên dưới:

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

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

Sau đó, trong bước tiếp theo, chúng tôi không có bất kỳ chiều rộng hoặc chiều cao nào, đại loại như thế này:

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

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

Và bây giờ chúng ta làm cho đường viền trái và phải trở nên vô hình để tạo ra tam giác mong muốn của chúng ta như dưới đây:

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

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

Nếu bạn không muốn chạy đoạn trích để xem các bước, tôi đã tạo một chuỗi hình ảnh để xem tất cả các bước trong một hình ảnh:

Phương pháp khác nhau. Với độ dốc tuyến tính (đối với IE, chỉ IE 10+). Bạn có thể sử dụng bất kỳ góc độ nào:

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

Đây là jsfiddle

CSS clip-path

Đây là điều tôi cảm thấy câu hỏi này đã bỏ lỡ; clip-path

clip-path một cách ngắn gọn

Cắt, với clip-pathtài sản, giống như cắt một hình dạng (như hình tròn hoặc hình ngũ giác) từ một mảnh giấy hình chữ nhật. Thuộc tính này thuộc về đặc tả kỹ thuật của Mô-đun mặt nạ CSS CSS cấp 1 . Các thông số kỹ thuật, mặt nạ CSS CSS cung cấp hai phương tiện để ẩn một phần hoặc toàn bộ các phần tử hình ảnh: mặt nạ và cắt xén.

• Trích từ Tạp chí Smashing

clip-pathsẽ sử dụng chính phần tử thay vì viền của nó để cắt hình dạng bạn chỉ định trong các tham số của nó. Nó sử dụng một hệ thống phối hợp dựa trên tỷ lệ phần trăm siêu đơn giản, giúp chỉnh sửa nó rất dễ dàng và có nghĩa là bạn có thể nhặt nó lên và tạo ra những hình dạng kỳ lạ và tuyệt vời chỉ trong vài phút.

Ví dụ hình tam giác

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>

Nhược điểm

Hiện tại nó có một nhược điểm lớn, một điều là nó thiếu sự hỗ trợ lớn, chỉ thực sự được bao phủ trong -webkit-các trình duyệt và không có hỗ trợ trên IE và chỉ có một phần trong FireFox.

Tài nguyên

Dưới đây là một số tài nguyên và tài liệu hữu ích để giúp hiểu rõ hơn clip-pathvà cũng bắt đầu tạo tài liệu của riêng bạn.

• Clippy - Một clip-pathmáy phát điện
• Hồ sơ giới thiệu ứng viên W3C
• clip-pathTài liệu MDN
• clip-path Hỗ trợ trình duyệt

Đây là một câu hỏi cũ, nhưng tôi nghĩ sẽ đáng để chia sẻ cách tạo một mũi tên bằng kỹ thuật tam giác này.

Bước 1:

Hãy tạo 2 hình tam giác, đối với cái thứ hai, chúng ta sẽ sử dụng :afterlớp giả và đặt nó ngay bên dưới lớp kia:

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

Bước 2

Bây giờ chúng ta chỉ cần đặt màu đường viền chiếm ưu thế của tam giác thứ hai thành cùng màu của nền:

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

Fiddle với tất cả các mũi tên:
http://jsfiddle.net/tomsarduy/r0zksgeu/

Mixin tam giác SASS (SCSS)

Tôi đã viết điều này để giúp dễ dàng hơn (và DRY) tự động tạo ra một tam giác 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;
}

ví dụ trường hợp sử dụng:

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

Trang sân chơi

Lưu ý quan trọng:
nếu hình tam giác có vẻ như pixel trong một số trình duyệt, hãy thử một trong các phương pháp được mô tả ở đây .

^{Nếu bạn muốn áp dụng đường viền cho tam giác, hãy đọc điều này: Tạo một tam giác bằng CSS?}

Hầu như tất cả các câu trả lời tập trung vào hình tam giác được xây dựng bằng cách sử dụng đường viền, vì vậy tôi sẽ xây dựng linear-gradientphương pháp (như đã bắt đầu trong câu trả lời của @lima_fil ).

Sử dụng một giá trị độ như thế 45°sẽ buộc chúng ta phải tôn trọng một tỷ lệ cụ thể height/widthđể có được tam giác chúng ta muốn và điều này sẽ không đáp ứng:

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

Thay vì làm điều này chúng ta nên xem xét giá trị được xác định trước định hướng như to bottom, to topvv Trong trường hợp này chúng ta có thể lấy bất cứ loại hình tam giác trong khi vẫn giữ cho nó thân thiện.

1) Hình tam giác

Để có được hình tam giác như vậy chúng ta cần một linear gradient và một hướng đường chéo như to bottom right, to top left, to bottom left, vv

.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) tam giác cân

Đối với cái này, chúng ta sẽ cần 2 gradient tuyến tính như trên và mỗi cái sẽ chiếm một nửa chiều rộng (hoặc chiều cao). Giống như chúng ta tạo ra một hình ảnh phản chiếu của tam giác đầu tiên.

.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) tam giác đều

Điều này là một chút khó khăn để xử lý vì chúng ta cần phải giữ một mối quan hệ giữa chiều cao và chiều rộng của gradient. Chúng ta sẽ có cùng một tam giác như trên nhưng chúng ta sẽ làm cho phép tính phức tạp hơn để biến đổi tam giác cân thành một tam giác đều.

Để làm cho nó dễ dàng, chúng tôi sẽ xem xét rằng chiều rộng của div của chúng tôi đã biết và chiều cao đủ lớn để có thể vẽ hình tam giác của chúng tôi bên trong ( height >= width).

Chúng ta có hai gradient của chúng ta g1và g2, đường màu xanh là chiều rộng của div wvà mỗi gradient sẽ có 50% của nó ( w/2) và mỗi cạnh của tam giác đều bằng nhau w. Đường màu xanh lá cây là chiều cao của cả hai gradient hgvà chúng ta có thể dễ dàng có được công thức dưới đây:

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

Chúng tôi có thể dựa vào calc()để thực hiện tính toán của mình và để có được kết quả cần thiết:

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

Một cách khác là kiểm soát chiều cao của div và giữ cho cú pháp của gradient dễ dàng:

.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) Tam giác ngẫu nhiên

Để có được một tam giác ngẫu nhiên, thật dễ dàng vì chúng ta chỉ cần loại bỏ điều kiện 50% của mỗi một NHƯNG chúng ta nên giữ hai điều kiện (cả hai nên có cùng chiều cao và tổng chiều rộng phải là 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>

Nhưng nếu chúng ta muốn xác định một giá trị cho mỗi bên thì sao? Chúng ta chỉ cần làm lại tính toán!

Hãy xác định hg1và hg2là chiều cao của gradient của chúng tôi (cả hai đều bằng đường màu đỏ) wg1và sau đó wg2là chiều rộng của gradient ( wg1 + wg2 = a). Tôi sẽ không chi tiết tính toán nhưng cuối cùng chúng ta sẽ có:

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

Bây giờ chúng tôi đã đạt đến giới hạn của CSS vì ngay cả khi calc()chúng tôi không thể thực hiện điều này, vì vậy chúng tôi chỉ cần thu thập kết quả cuối cùng theo cách thủ công và sử dụng chúng dưới dạng kích thước cố định:

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

Tặng kem

Chúng ta không nên quên rằng chúng ta cũng có thể áp dụng xoay và / hoặc nghiêng và chúng ta có nhiều tùy chọn hơn để có được nhiều tam giác hơn:

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

Và tất nhiên chúng ta nên ghi nhớ giải pháp SVG có thể phù hợp hơn trong một số trường hợp:

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>

đây là một câu đố khác:

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

Những người khác đã giải thích điều này tốt. Hãy để tôi cung cấp cho bạn một hình ảnh động sẽ giải thích điều này một cách nhanh chóng: http://codepen.io/chriscoyier/pen/lotjh

Dưới đây là một số mã để bạn chơi và tìm hiểu các khái niệm.

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

Chơi với điều này và xem những gì xảy ra. Đặt chiều cao và chiều rộng bằng không. Sau đó xóa đường viền trên cùng và làm cho trái và phải trong suốt, hoặc chỉ cần nhìn vào mã bên dưới để tạo ra một tam giác css:

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

Nếu bạn muốn chơi xung quanh với border-size, widthvà heightvà xem làm thế nào những người có thể tạo ra hình dạng khác nhau, hãy thử điều này:

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>

Thử cái này:-

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

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

Tôi biết đây là một phương pháp cũ, nhưng tôi muốn thêm vào cuộc thảo luận này rằng có ít nhất 5 phương pháp khác nhau để tạo một tam giác chỉ bằng HTML & CSS.

1. Sử dụng borders
2. Sử dụng linear-gradient
3. Sử dụng conic-gradient
4. Sử dụng transformvàoverflow
5. Sử dụng clip-path

Tôi nghĩ rằng tất cả đã được đề cập ở đây ngoại trừ phương pháp 3, bằng cách sử dụng conic-gradient, vì vậy tôi sẽ chia sẻ nó ở đây:

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

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