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

hover me

example:

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

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

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

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

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

Đã 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