Trên thực tế, chúng ta có thể tạo "phần tam giác" trong chính đường viền bằng cách sử dụng :before or :before phần tử giả. Kiểm tra các mã dưới đây để tham khảo
Phương pháp 1
body {
background-color: #F3F5F6;
width: 500px;
margin: 0 auto;
padding: 10%;
}
.message {
display: block;
position: relative;
background: #FFFFFF;
padding: 15px;
border: 1px solid #DDDDDD;
margin-top: 20px;
}
.message:after {
content: '';
display: block;
position: absolute;
left: 20px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 10px solid #FFFFFF;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
Create triangle shape for div Method 1
Testing
Phương pháp 2
body {
background-color: #F3F5F6;
width: 500px;
margin: 0 auto;
padding: 10%;
}
.message {
display: block;
position: relative;
background: #FFFFFF;
padding: 15px;
border: 1px solid #DDDDDD;
margin-top: 20px;
}
.message:before, .message:after {
content: '';
display: block;
position: absolute;
bottom: 100%;
width: 0;
height: 0;
}
.message:before {
left: 19px;
border: 11px solid transparent;
border-bottom-color: #ddd;
}
.message:after {
left: 20px;
border: 10px solid transparent;
border-bottom-color: #fff;
}
Create triangle shape for div Method 2
Testing
Tổng số lượt xem. 845
Đăng lại
0 cổ phiếu
Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng các thuộc tính CSS để tạo một hình tam giác. Thông thường không có kỹ thuật trực tiếp để tạo tam giác bằng CSS.
Cách tiếp cận. Để tạo tam giác, trong phần HTML, chúng ta chỉ cần thêm một div cho mỗi tam giác. Khái niệm này là tạo một hộp không có chiều rộng hoặc chiều cao. Chiều rộng của đường viền xác định chiều rộng và chiều cao thực tế của Tam giác. Ví dụ: đường viền dưới cùng của hình tam giác mũi tên hướng lên có màu, trong khi đường viền bên trái và bên phải trong suốt, tạo thành một hình tam giác. Để tạo các hình tam giác có mũi tên dưới cùng, mũi tên trái và mũi tên phải, chúng ta phải giữ cho đường viền trên cùng, đường viền bên phải và đường viền bên trái được tô màu tương ứng
Tôi là một kỹ sư phần mềm với hơn sáu năm kinh nghiệm. Tôi đã làm việc với các ngăn xếp khác nhau, bao gồm WAMP, MERN và MEAN. Ngôn ngữ tôi chọn là JavaScript; . jsBạn có thể tạo chúng bằng một div. Sau đây là một thuộc tính Border Radius CSS cơ bản và phổ biến nhất, được hỗ trợ trên tất cả các trình duyệt mới nhất
1. Up Arrow [
]..up-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
}
2. Down Arrow [
]..down-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #f00;
}
3. Left Arrow [
]..left-arrow {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid blue;
}
4. Right Arrow [
]..right-arrow {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}
Bạn có thể tùy chỉnh thêm mã này theo yêu cầu của bạn
Ví dụDưới đây là một trong những ví dụ về Tam giác CSS hướng lên, sử dụng. trước phần tử giả trong thẻ tiêu đề tạo tam giác.