Dù bạn có tin hay không, các hình tam giác có thể được vẽ bằng CSS thuần túy, không cần hình ảnh. Trong bài đăng này, tôi sẽ giải thích cách vẽ các loại hình tam giác khác nhau bằng một thủ thuật nhỏ thông minh liên quan đến các đường viền trên một phần tử Show Đường dẫn nhanhNó được thực hiện như thế nàoMột hình tam giác được tạo trong CSS bằng cách sử dụng các đường viền trên phần tử HTML theo một cách cụ thể. Đây là cách
Các loại hình tam giácĐặt tên cho hai hình tam giác để mô tả chúng có bao nhiêu cạnh bằng nhau và độ lớn của các góc chứa chúng. Tôi sẽ giải thích bên dưới cách tạo các loại hình tam giác khác nhau bằng HTML/CSS và cung cấp đánh dấu cho từng loại tam giác cânTam giác cân có hai cạnh bằng nhau và hai góc bằng nhau. Trong phần giải thích về cách tạo tam giác ở trên, tôi đã kết thúc với một tam giác cân. Ở đây tôi sẽ đi qua và cung cấp đánh dấu CSS cho các tam giác cân chỉ theo các hướng khác nhau và có chiều rộng và chiều cao khác nhau Tam giác cân hướng lên trênXem bản trình diễn đánh dấuĐây là hình tam giác giống như tôi đã tạo để giải thích. Đường viền bên trái và bên phải phải trong suốt và đường viền dưới cùng, là đường viền sẽ tạo thành hình tam giác, nên có màu. Đường viền trên cùng là không cần thiết và do đó có thể bỏ qua Xem đánh dấu phần HTML<p>I am an upwards pointing triangle.</p> phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
tam giác cân hướng xuống dướiXem bản trình diễn đánh dấuĐể tạo mũi tên trỏ xuống, đường viền bên trái và bên phải phải trong suốt và đường viền trên cùng phải có màu. Đường viền dưới cùng là không cần thiết và do đó có thể bỏ qua Xem đánh dấu phần HTML<p>I am a downwards pointing triangle.</p> phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-top: 80px solid #f09;
border-right: 80px solid transparent;
border-left: 80px solid transparent;
}
Tam giác cân trỏ sang tráiXem bản trình diễn đánh dấuĐể tạo mũi tên chỉ sang trái, đường viền trên và dưới phải trong suốt và đường viền bên phải phải có màu. Đường viền bên trái là không cần thiết và do đó có thể bỏ qua Xem đánh dấu phần HTML<p>I am a left pointing triangle.</p> phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-top: 80px solid transparent;
border-right: 80px solid #f09;
border-bottom: 80px solid transparent;
}
Tam giác cân hướng sang phảiXem bản trình diễn đánh dấuĐể tạo mũi tên chỉ sang phải, đường viền trên và dưới phải trong suốt và đường viền bên trái phải có màu. Đường viền bên phải là không cần thiết và do đó có thể bỏ qua Xem đánh dấu phần HTML________số 8phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-left: 80px solid #f09;
}
Tam giác cân hẹpXem bản trình diễn đánh dấuĐể tạo một hình tam giác hẹp hơn, tôi cần giảm kích thước của các đường viền trong suốt bên trái và bên phải. Tôi cũng đã tăng kích thước của đường viền dưới cùng trong ví dụ này để làm cho hình tam giác cao hơn Xem đánh dấu phần HTML<p>I am a downwards pointing triangle.</p>0 phần CSS<p>I am a downwards pointing triangle.</p>1 Tam giác cân rộngXem bản trình diễn đánh dấuĐể tạo một hình tam giác rộng hơn, tôi cần tăng kích thước của các đường viền trong suốt bên trái và bên phải. Tôi cũng đã giảm kích thước của đường viền dưới cùng trong ví dụ này để làm cho hình tam giác ngắn hơn Xem đánh dấu phần HTMLp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
0phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
1Tam giác đềuMột tam giác đều có ba cạnh bằng nhau và ba góc bằng nhau, tất cả đều bằng 60° Xem bản trình diễn đánh dấuĐể tạo một tam giác đều, tôi chỉ cần làm cho tam giác đó trông giống như nó có 3 cạnh bằng nhau và 3 góc bằng nhau – Tôi đang làm điều này bằng mắt, nhưng tôi chắc chắn rằng có một cách tiếp cận toán học hơn. Trong ví dụ của tôi, tôi vừa sử dụng ví dụ tam giác cân hướng lên trên, nhưng đã tăng kích thước đường viền dưới lên một chút để cân bằng các kích thước Xem đánh dấu phần HTMLp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
2phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
3tam giác cânMột tam giác cân không có bất kỳ cạnh bằng nhau hoặc góc bằng nhau Xem bản trình diễn đánh dấuĐể tạo một tam giác cân, mỗi đường viền cần có kích thước khác nhau. Với ví dụ này, tôi lấy tam giác cân hướng lên trên, tăng kích thước viền dưới lên một chút để tăng chiều cao của tam giác, giảm viền phải và tăng kích thước viền trái để tạo ra kết quả này Xem đánh dấu phần HTMLp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
4phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
5Tam giác góc vuôngVới một tam giác vuông, một trong ba góc là 90° Xem bản trình diễn đánh dấuĐể tạo tam giác vuông, cần loại bỏ một trong các đường viền để tạo cạnh sắc nét. Trong ví dụ của tôi, tôi đã loại bỏ đường viền bên phải, bên trái được giữ trong suốt và có chiều rộng, và phần dưới được tô màu Xem đánh dấu phần HTMLp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
6phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
7tam giác góc tùMột tam giác tù có một góc lớn hơn 90°, vì vậy một trong các góc sẽ làm cho tam giác trông như bị uốn cong về phía sau Xem bản trình diễn đánh dấuĐể tạo một tam giác góc tù, thực ra tôi sẽ phải tạo 2 tam giác vuông và đặt chúng chồng lên nhau để tạo ảo giác; . Hình tam giác thứ hai phải là màu nền của trang web mà nó sẽ truy cập (trong trường hợp của tôi là màu trắng). Nó cần được áp dụng cho phần tử <p>I am a downwards pointing triangle.</p>2 hoặc <p>I am a downwards pointing triangle.</p>3 (trong ví dụ của tôi là thẻ <p>I am a downwards pointing triangle.</p>0) hoặc cho phần tử vùng chứa bổ sung như <p>I am a downwards pointing triangle.</p>5 hoặc <p>I am a downwards pointing triangle.</p>6 Hình tam giác thứ hai này cần được định vị tuyệt đối sao cho nó nằm trên đỉnh của hình tam giác màu và do đó che khuất một phần của hình tam giác đó. Trong ví dụ của tôi, góc vuông của hình tam giác màu nằm ở bên phải của hình, tôi đã đặt hình tam giác thứ hai ở bên phải để chặn góc vuông đó bằng góc nghiêng của chính nó Xem đánh dấu phần HTMLp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
8phần CSSp {
width: 0;
height: 0;
text-indent: -9999px;
border-right: 80px solid transparent;
border-bottom: 80px solid #f09;
border-left: 80px solid transparent;
}
9tam giác góc nhọnVới một tam giác nhọn, tất cả các góc đều nhỏ hơn 90°. Xem phần trên của tôi để biết ví dụ về tam giác cấp tính Đi ra ngoài và thử nghiệmVì vậy, hãy trang bị kiến thức này, bạn sẽ không bao giờ biết khi nào tam giác CSS có thể hữu ích. Một cách sử dụng phổ biến là dành cho ô lời thoại, vì vậy không cần hình ảnh và màu sắc/kiểu của toàn bộ nội dung có thể được thay đổi thông qua CSS thay vì loay hoay với hình ảnh trong trình chỉnh sửa. Xem nguồn cấp dữ liệu Twitter của tôi ở thanh bên bên phải để biết ví dụ sử dụng tam giác góc tù 3 góc nào tạo nên tam giác đều?Giải thích. Tam giác đều là tam giác có ba cạnh bằng nhau. Nó cũng có tính chất là cả ba góc trong bằng nhau. Nói cách khác, cả ba góc của một tam giác đều luôn 60° .
Bạn phải cho gì để dựng một tam giác đều?Như vậy, để dựng một tam giác đều, không cần cung cấp dữ liệu về các góc nhưng phải có độ dài một cạnh .
Làm cách nào để tạo mũi tên trong CSS?Cách tiếp cận. Tạo mũi tên bằng CSS rất đơn giản. Đầu tiên, tạo một hình chữ L (bảng chữ cái) bằng cách sử dụng thuộc tính box-shadow nào đó rồi xoay hình đó sang một góc nào đó để căn chỉnh chúng (cả mũi tên trái và phải) với nhau. HTML Code: In this section, two div elements are created, one for each arrow. |
