vẽ một mũi tên bên trong ô bảng bằng cách sử dụng CSS

Question

Một số ô trong bảng của tôi có số lượng nội dung thực sự lớn. Tôi không muốn hiển thị tất cả chúng cho đến khi người dùng di chuyển trên các tế bào, nhưng tôi muốn đặt một mũi tên ở góc để cho biết nó có thể được lơ lửng - giống như trong bình luận excel. Làm thế nào tôi có thể làm điều này bằng cách sử dụng CSS?

Answer 1

Sử dụng CSS Shapes và pseudo-yếu tố:

HTML

<table> 
    <tr><td class="comment">Foo</td></tr> 
</table> 

CSS

* { margin: 0; padding: 0;} 
td { border: 1px solid black; } 
.comment:after { 
    content: ""; 
    position: relative; 
    top: 0.5em; 
    border-left: 0.5em solid transparent; 
    border-top: 0.5em solid red; 
} 

DEMO

câu trả lời Cập nhật để sửa chữa gói:

/* add relative positioning to the td */ 
td { border: 1px solid black; position: relative; } 
/* and absolute positioning for the triangle */ 

.comment:after { 
    content: ""; 
    position: absolute; 
    /* left: calc(100% - 0.5em); */ 
    /* use right: 0; instead */ 
    right: 0; 
    top: 0; 
    border-left: 0.5em solid transparent; 
    border-top: 0.5em solid red; 
} 

Fixed Demo

Answer 2

Chỉ cần thay thế 100 với chiều rộng và chiều cao của bạn, và thêm một vị trí ở một nơi ngay

.triangle-topright { 
    width: 0; 
    height: 0; 
    border-top: 100px solid red; 
    border-left: 100px solid transparent; 
} 

Answer 3

Bạn có thể sử dụng hình dạng CSS và định vị tuyệt đối để thực hiện điều này.

Dưới đây là một fiddle: http://jsfiddle.net/pNmQg/

table td { position: relative; } 
table td span.arrow { 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-top: 5px solid red; 
    border-left: 5px solid transparent; 
} 

Answer 4

tôi tìm thấy một giải pháp phù hợp cho tất cả các trình duyệt --- Tested.

  .arrow-right-1 { 
 
      position: absolute; 
 
      top: -1px; 
 
      right: -5px; 
 
      float: right; 
 
      width: 0; 
 
      height: 0; 
 
      border-left: 10px solid transparent; 
 
      border-right: 10px solid transparent; 
 
      border-bottom: 10px solid red; 
 
      
 
      transform: rotate(45deg); 
 
      } 
 
      
 
      
 
      
 
      td { 
 
      border: solid 1px blue; 
 
      width: 220px; 
 
      height: 100px; 
 
      /* padding: 0px !important; */ 
 
      /* vertical-align: top; */ 
 
      position: relative; 
 
      }

<table class="table"> 
 

 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="arrow-right-1"></div>you can increase or decrease the size td's width/height or can put more text 
 
     </td> 
 

 
    </tr> 
 

 
    </tbody> 
 
</table>