Hướng dẫn css triangle up and down - css tam giác lên và xuống

Question

HTML

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.

CSS

Ý 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.

.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

Làm cách nào để tạo một mũi tên xuống (tam giác) khi lơ lửng trên một liên kết?

Một cái gì đó giống như tab Kết quả trên Codepen, xem tại đây

Tôi đã cố gắng tạo ra tam giác bằng cách làm theo hướng dẫn ở trên, nhưng không có may mắn

 a{
  background: red;
    float: left;
    width: 30%;
    padding: 5px;
    display block
  }

  a:hover {background: green;}

Hướng dẫn css triangle up and down - css tam giác lên và xuống

Dippas

56.8K15 Huy hiệu vàng114 Huy hiệu bạc123 Huy hiệu đồng15 gold badges114 silver badges123 bronze badges

Làm cách nào để tạo một mũi tên xuống (tam giác) khi lơ lửng trên một liên kết?May 28, 2016 at 22:12

0

Một cái gì đó giống như tab Kết quả trên Codepen, xem tại đây

css:

.arrow_down_on_hover{
  position: relative;
}
.arrow_down_on_hover:before{
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  display: none;
  border-top: 20px solid #f00;
  position: absolute;
  right: 50%;
  margin-right: -10px;
  bottom: -20px;
}
.arrow_down_on_hover:hover:before{
  display: block;
}

html:

hover me

example:

http://codepen.io/eboye/pen/zBYzav

Tôi đã cố gắng tạo ra tam giác bằng cách làm theo hướng dẫn ở trên, nhưng không có may mắnMay 28, 2016 at 22:20

 a{
  background: red;
    float: left;
    width: 30%;
    padding: 5px;
    display block
  }

  a:hover {background: green;}

eboye

Dippas4 silver badges10 bronze badges

a:hover .arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

link

Khi được hỏi ngày 28 tháng 5 năm 2016 lúc 22:12May 28, 2016 at 22:22

Tôi không chắc ý bạn là gì, nhưng đây có thể là câu trả lời:Randy

Đã trả lời ngày 28 tháng 5 năm 2016 lúc 22:205 gold badges39 silver badges56 bronze badges

EboyeBoye

a::after {
  content: '\25bc'; 
  color: red;
}

a:hover::after {
  color: green; 
}

Hover me!

3184 Huy hiệu bạc10 Huy hiệu đồng

Đã trả lời ngày 28 tháng 5 năm 2016 lúc 22:22May 28, 2016 at 22:23

RandyrandyGolezTrol

9.1225 Huy hiệu vàng39 Huy hiệu bạc56 Huy hiệu Đồng17 gold badges182 silver badges204 bronze badges

Có lẽ bạn chỉ có thể sử dụng ký hiệu mũi tên xuống:

Bạn cũng có thể chỉ định cùng một ký tự trong HTML thay vì CSS, bằng cách sử dụng thực thể:

.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; 
}

3.

a {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid transparent;
  display:block
}
a:hover {
  border-top: 20px solid green
}

.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; 
}

0

Nếu đây chỉ là vấn đề hiển thị/ẩn tam giác khi di chuột một số liên kết, thì một cách tiếp cận tốt hơn sẽ sử dụng các phần tử giả ________ 16/________ 17 cùng với biểu tượng mũi tên Unicode Down

.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; 
}

1

.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; 
}

0

Đã trả lời ngày 28 tháng 5 năm 2016 lúc 22:21May 28, 2016 at 22:21

Dippasdippasdippas

56.8K15 Huy hiệu vàng114 Huy hiệu bạc123 Huy hiệu đồng15 gold badges114 silver badges123 bronze badges

programming css CSS triangle CSS triangle generator Triangle CSS CodePen clip-path triangle css Text triangle css Box-shadow triangle CSS Background triangle CSS

Hướng dẫn css triangle up and down - css tam giác lên và xuống

HTML

CSS

Thử nghiệm

Ví dụ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội