Bạn đã bao giờ tự hỏi làm thế nào để tạo một hình tam giác chỉ bằng cách sử dụng css và HTML chưa?
Hãy tạo một div 100 x 100 và làm cho nó có màu đen. Sau đó thử thêm 4 màu khác nhau vào các đường viền như xanh lá cây, vàng, đỏ, tím
Bây giờ bạn có thể thấy một hình vuông có 4 đường viền. Kiểm tra hình dạng của đường viền. Nó giống như một góc trong cả hai góc. Sau đó, chúng ta có thể đặt chiều rộng và chiều cao bằng 0 để chỉ giữ lại các đường viền. Và loại bỏ màu nền. Bây giờ bạn có thể thấy một hình vuông nhỏ với 4 hình tam giác phải không?
.triangle{
width:0px;
height:0px;
background:black;
border:20px solid;
border-top-color: red;
border-left-color: green;
border-right-color: blue;
border-bottom-color: purple;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ bạn chỉ cần thay đổi màu sắc thành trong suốt và chỉ giữ lại hình dạng cần thiết
tam giác vuông
giữ màu của đường viền bên trái và làm trong suốt khác
.triangle-right{
width:0px;
height:0px;
border:10px solid;
border-top-color: transparent;
border-left-color: green;
border-right-color: transparent;
border-bottom-color: transparent;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đỉnh tam giác
giữ màu của viền dưới và làm trong suốt khác
.triangle-top{
width:0px;
height:0px;
border:10px solid;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: purple;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
tam giác trái
giữ màu của đường viền bên phải và làm trong suốt khác
.triangle-left{
width:0px;
height:0px;
border:10px solid;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: blue;
border-bottom-color: transparent;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
tam giác đáy
giữ màu của đường viền trên cùng và làm trong suốt khác
.triangle-bottom{
width:0px;
height:0px;
border:10px solid;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tăng kích thước của hình tam giác
Bằng cách thay đổi kích thước đường viền, bạn có thể tăng kích thước của hình tam giác
.triangle-right{
width:0px;
height:0px;
border:20px solid;
border-top-color: transparent;
border-left-color: green;
border-right-color: transparent;
border-bottom-color: transparent;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Xoay hình tam giác
Bạn có thể sử dụng thuộc tính biến đổi đặt xoay khi bạn cần
.triangle-rotate{
width:0px;
height:0px;
border:10px solid;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: purple;
transform: rotate[20deg];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thêm một hình tam giác vào cuối div
Việc thêm hình tam giác vào cuối div đôi khi có vẻ khó hiểu. Bạn có thể dùng. sau bộ chọn để thêm kiểu vào cuối div. Khi thêm mũi tên vào dưới cùng, chúng ta cần giữ đường viền trên cùng và làm cho các đường viền khác trong suốt. Trong div này, chiều rộng đã được đặt là 100px. Sau đó, đường viền bên trái và bên phải phải bằng một nửa kích thước của div. Ngoài ra, bằng cách thay đổi chiều cao đường viền trên cùng, bạn có thể thay đổi chiều cao của hình tam giác
.triangle-after{
width: 100px;
height: 50px;
background: black;
position: relative;
}
.triangle-after:after{
content: "";
position: absolute;
width:0;
height:0;
top: 100%;
border-top: solid 10px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
border-bottom: solid 10px transparent;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Được xuất bản lần đầu tại Mightytechno
Kết nối với tôi - Instagram. Blog. YouTube