Tam giác dốc CSS

CSS hiện đại - và hỗ trợ trình duyệt hiện đại - cung cấp cho chúng tôi ba phương pháp tuyệt vời để tạo các hình dạng CSS cơ bản, thuần túy. Trong hướng dẫn này, chúng ta sẽ xem xét cách tạo tam giác CSS bằng cách sử dụng

• biên giới
• độ dốc tuyến tính

• .triangle {
    border: 10px solid transparent;
    border-left-color: blue;
  }

  2

Phương pháp 1. biên giới

#

Đây là thủ thuật đầu tiên tôi học được để tạo các tam giác CSS và nó vẫn là một chế độ chờ vững chắc

Với phần tử có chiều rộng bằng không và chiều cao bằng không, bất kỳ giá trị nào được cung cấp

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

3 giao nhau trực tiếp và là dấu hiệu hiển thị duy nhất của một phần tử. Giao điểm này là thứ chúng ta có thể tận dụng để tạo thành hình tam giác

Để minh họa cách thức hoạt động của tính năng này, chúng tôi sẽ cung cấp một màu đường viền khác nhau cho mỗi bên

.triangle {
  border: 10px solid blue;
  border-right-color: red;
  border-bottom-color: black;
  border-left-color: green;
}

Cái nào tạo ra cái sau, trong đó bạn có thể thấy về cơ bản chúng ta đã đạt được 4 hình tam giác

Thay vào đó, để tạo cái này dưới dạng một tam giác đơn, trước tiên chúng tôi quyết định hướng mà chúng tôi muốn tam giác chỉ. Vì vậy, nếu chúng tôi muốn nó trỏ về bên phải, tương tự như biểu tượng "phát", chúng tôi muốn giữ cho đường viền bên trái hiển thị. Sau đó, chúng tôi đặt màu của các đường viền khác thành

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

4, như vậy

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

Trong hình ảnh demo bên dưới, tôi đã thêm một

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

5 màu đỏ để xem hộp giới hạn để chúng ta có thể thảo luận về một số cải tiến

Một cải tiến mà chúng tôi có thể thực hiện là loại bỏ chiều rộng của đường viền bên phải để ngăn không cho nó được đưa vào tổng chiều rộng của phần tử. Chúng ta cũng có thể đặt các giá trị duy nhất cho trên và dưới để kéo dài hình tam giác. Đây là một cách nhỏ gọn để đạt được những kết quả này

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

Như đã thấy trong hình ảnh cập nhật bên dưới, trước tiên chúng tôi chỉ định một đường viền trong suốt, chắc chắn. Sau đó, chúng tôi xác định chiều rộng sao cho giá trị trên cùng và dưới cùng nhỏ hơn giá trị bên trái để điều chỉnh tỷ lệ khung hình và hiển thị hình tam giác kéo dài

Vì vậy, để trỏ tam giác theo một hướng khác, chẳng hạn như hướng lên trên, chúng ta chỉ xáo trộn các giá trị sao cho đường viền dưới cùng nhận được giá trị màu và đường viền trên cùng được đặt thành 0

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 0 7px 10px 7px;
  border-bottom-color: blue;
}

Kết quả là

Đường viền rất hiệu quả đối với hình tam giác, nhưng không thể mở rộng ra ngoài hình dạng đó nếu không có thêm các yếu tố liên quan. Đây là nơi hai phương pháp tiếp theo của chúng tôi đến để giải cứu

Phương pháp 2. .triangle { border: 10px solid transparent; border-left-color: blue;}6

#

Độ dốc CSS được tạo dưới dạng giá trị

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

7

Trước tiên, hãy thiết lập giai đoạn của chúng ta, nếu bạn muốn, bằng cách xác định kích thước hộp và ngăn chặn

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

8

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

1

Sau đó, chúng tôi sẽ thêm gradient đầu tiên của chúng tôi. Điều này sẽ tạo ra giao diện tô màu một nửa phần tử của chúng ta thành màu xanh lam vì chúng ta đang tạo điểm dừng cứng ở mức 50% giữa màu xanh lam và giá trị trong suốt

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2

Bây giờ, nếu phần tử của chúng tôi là hình vuông, điều này sẽ xuất hiện để cắt từ góc này sang góc khác, nhưng cuối cùng chúng tôi muốn có một tỷ lệ khung hình hơi khác như chúng tôi đã làm trước đây

Mục tiêu của chúng tôi là tạo một hình tam giác có hình dạng giống như khi sử dụng phương pháp đường viền của chúng tôi. Để làm được điều này, chúng ta sẽ phải điều chỉnh giá trị

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

9 và

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

0

Điều chỉnh đầu tiên là thay đổi

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

9. Tóm lại, giá trị đầu tiên là chiều rộng và chiều cao thứ hai. Chúng tôi muốn hình tam giác của chúng tôi được phép sử dụng 100% chiều rộng, nhưng chỉ 50% chiều cao, vì vậy hãy thêm phần sau

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

6

Với

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

6 trước đây của chúng tôi không thay đổi, đây là kết quả

Do góc

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

3 của gradient, hình dạng có vẻ hơi lạ. Chúng ta cần điều chỉnh góc sao cho cạnh trên của tam giác cắt từ góc trên bên trái đến giữa cạnh phải của hộp giới hạn

Tôi không phải là một phù thủy toán học, vì vậy điều này cần một chút thử nghiệm bằng cách sử dụng DevTools để tìm ra giá trị phù hợp 😉

Cập nhật giá trị

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

6 như sau

.triangle {
  border: 10px solid blue;
  border-right-color: red;
  border-bottom-color: black;
  border-left-color: green;
}

0

Và đây là tiến trình của chúng tôi - về mặt kỹ thuật là một hình tam giác, không hoàn toàn giống như chúng tôi muốn

Trong khi đối với thủ thuật đường viền, chúng ta phải dựa vào giao điểm để tạo các hình, thì đối với

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

6, chúng ta phải tận dụng khả năng thêm nhiều nền để tạo lớp hiệu ứng và đạt được hình tam giác đầy đủ của chúng ta

Vì vậy, chúng tôi sẽ nhân đôi

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

6 của mình và cập nhật giá trị độ của nó để trở thành hình gương của cái đầu tiên, vì nó sẽ được đặt bên dưới nó. Điều này dẫn đến những điều sau đây cho định nghĩa đầy đủ của

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

7

.triangle {
  border: 10px solid blue;
  border-right-color: red;
  border-bottom-color: black;
  border-left-color: green;
}

4

Nhưng - chúng tôi vẫn chưa hoàn thành hiệu ứng, như có thể thấy trong hình ảnh tiến độ

Lý do cho sự trùng lặp là vì vị trí mặc định của cả hai dải màu là

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

8 - còn được gọi là

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

9. Điều này tốt cho độ dốc ban đầu của chúng tôi, nhưng chúng tôi cần điều chỉnh độ dốc thứ hai

Để làm điều này, chúng ta cần đặt nhiều giá trị trên

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

0. Chúng đi theo thứ tự như

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

7

.triangle {
  border: 10px solid blue;
  border-right-color: red;
  border-bottom-color: black;
  border-left-color: green;
}

9

Và bây giờ chúng tôi có kết quả mong muốn của chúng tôi

Nhược điểm của phương pháp này là nó không linh hoạt để thay đổi tỷ lệ khung hình mà không tính toán lại độ

Tuy nhiên, độ dốc CSS có thể được sử dụng để tạo nhiều hình dạng hơn, đặc biệt là do khả năng xếp lớp của chúng để tạo hiệu ứng

Để có lớp học chính về độ dốc CSS cho hình dạng và hình minh họa đầy đủ, hãy xem A Single Div của Lynn Fisher

Tham gia bản tin của tôi để cập nhật bài viết, mẹo CSS và tài nguyên giao diện người dùng

Đừng điền vào đây nếu bạn là con người.

E-mail

Đăng ký

Phương pháp 3. .triangle { border: 10px solid transparent; border-left-color: blue;}2

#

Phương pháp cuối cùng này là phương pháp mỏng nhất và có khả năng mở rộng nhất. Hỗ trợ hiện hơi chậm, vì vậy hãy nhớ kiểm tra phân tích của chúng tôi để xác định xem đây có phải là giải pháp chấp nhận được không

Đây là điểm bắt đầu của chúng tôi cho phần tử của chúng tôi, đó là kích thước hộp và một

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 0 7px 10px 7px;
  border-bottom-color: blue;
}

3

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

0

Khái niệm về

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2 là bạn sử dụng nó để vẽ một hình đa giác (hoặc hình tròn hoặc hình elip) và định vị nó trong phần tử. Bất kỳ khu vực nào bên ngoài

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2 đều không được trình duyệt vẽ một cách hiệu quả, do đó "cắt bớt" diện mạo chỉ còn giới hạn của

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2

Để minh họa điều này nhiều hơn và để tạo định nghĩa

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2 mong muốn của bạn, hãy xem trình tạo trực tuyến. Clippy

Cú pháp có thể khó làm quen hơn một chút, vì vậy tôi chắc chắn khuyên bạn nên sử dụng trình tạo đã lưu ý ở trên để tạo đường dẫn của bạn

Đối với mục đích của chúng tôi, đây là một hình tam giác hướng sang bên phải

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

1

Với

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2, bạn đang xác định tọa độ cho mọi điểm bạn đặt dọc theo đường dẫn. Vì vậy, trong trường hợp này, chúng tôi có một điểm ở trên cùng bên trái (

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

8), dưới cùng bên trái (

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

10) và chính giữa bên phải (

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

11)

Và đây là thành quả của chúng ta

Mặc dù

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2 rất linh hoạt đối với nhiều hình dạng và cũng có khả năng mở rộng nhất do thích ứng với bất kỳ hộp giới hạn hoặc tỷ lệ khung hình nào, nhưng có một số lưu ý

Khi tôi đề cập trình duyệt không vẽ bất cứ thứ gì bên ngoài hộp giới hạn, điều này bao gồm các đường viền,

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

13 và

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

5. Những thứ đó không được vẽ lại để phù hợp với hình dạng đã cắt. Đây có thể là một lỗi xác thực và có thể yêu cầu các phần tử bổ sung hoặc chuyển các hiệu ứng sang cấp độ gốc để thay thế các hiệu ứng bị mất

Đây là video egghead của Colby Fayock để hiểu rõ hơn về

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

2 và cách mang lại các hiệu ứng như

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

13

Thử nghiệm

#

Bản trình diễn này cho thấy ba cách của chúng tôi để tạo tam giác CSS, được thêm vào từng phần tử bằng cách sử dụng

.triangle {
  border: 10px solid transparent;
  border-left-color: blue;
}

17 và sử dụng các đơn vị khung nhìn để đáp ứng