Hiện tại tôi có một Div trông như thế này:
DashboardCSS:
#nav {
float: right;
margin: 0;
padding: 8px 0 0 0;
list-style: none;
display: inline-block;
}
#nav li {
float: left;
padding: 7px 5px;
margin: 0 5px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
border-radius: 7px;
}
#nav li a {
color: #0b70cc;
text-decoration: none;
padding: 7px 5px;
}
#nav li.active a {
color: #ffffff;
}
#nav li.active {
background-color: #0b70cc;
color: white;
}
JSfiddle
Nếu bất cứ ai có thể giúp tôi làm điều này, tôi thực sự đánh giá cao nó!
Bạn có thể làm cho họ với một div duy nhất. Thật tốt khi có các lớp học cho mỗi khả năng hướng. Ý tưởng là một hộp có chiều rộng và chiều cao bằng không. Chiều rộng và chiều cao thực tế của mũi tên được xác định bởi chiều rộng của đường viền. Ví dụ, trong một mũi tên UP, đường viền dưới cùng được tô màu trong khi bên trái và phải trong suốt, tạo thành hình tam giác.HTML
CSS
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}Thử nghiệm
Xem hoạt hình bút để giải thích các hình tam giác CSS của Chris Coyier [@Chriscoyier] trên Codepen.
Ví dụ
Dave Everitt viết trong:
Đối với một tam giác đều, nó có giá trị chỉ ra rằng chiều cao là 86,6% chiều rộng SO
Xem thảo luận
Cải thiện bài viết
Lưu bài viết
Xem thảo luận
Cải thiện bài viết
Lưu bài viết
Đọc
Bàn luậnTo create the triangle, in the HTMLpart we have to just add a single div for each triangle. The concept is to create a box with no width or height. The width of the border determines the Triangle’s actual width and height. The bottom border of an up-arrowed triangle, for example, is colored, while the left and right borders are transparent, forming a triangle. To make bottom-arrowed, left-arrowed, and right-arrowed triangles, we have to keep the top border, right border, and left border colored respectively.
Trong bài viết này, chúng ta sẽ học cách sử dụng các thuộc tính CSS để tạo hình dạng 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. & NBSP;
- Cách tiếp cận: Để tạo tam giác, trong htmlpart, chúng ta phải chỉ thêm một div duy nhất cho mỗi tam giác. Khái niệm là tạo ra 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 một tam giác kết nối, có màu, trong khi các đường viền trái và phải trong suốt, tạo thành một tam giác. Để thực hiện các hình tam giác bắt đầu, kết nối bên trái và bắt buộc phải, chúng ta phải giữ đường viền trên cùng, đường viền bên phải và đường viền bên trái tương ứng.: This CSS property is used to add a border on the top of an element, it takes the value of the border width and the color of the border.
- Thuộc tính đã sử dụng [vai trò chính]:: This CSS property is used to add a border on the left side of an element, it takes the value of the border width and the color of the border.
- Đường viền: Thuộc tính CSS này được sử dụng để thêm một đường viền trên đỉnh của một phần tử, nó lấy giá trị của chiều rộng biên và màu của đường viền. & NBSP;: This CSS property is used to add a border on the right side of an element, it takes the value of the border width and the color of the border.
- Border-Bottom: Thuộc tính CSS này được sử dụng để thêm đường viền vào đáy của một phần tử, nó lấy giá trị của chiều rộng biên và màu của đường viền. & NBSP;: This CSS property is used to add a border to the bottom of an element, it takes the value of the border width and the color of the border.
Ví dụ dưới đây cho thấy cách tiếp cận trên.
Ví dụ 1: Trong mã bên dưới Border-Bottomproperty được sử dụng để tạo hình tam giác kết thúc.In the below code border-bottomproperty is used to make an up-arrowed triangle.