Làm thế nào để tạo một đường chéo trong một ô bảng?

Question

Làm cách nào để tạo đường chéo từ góc dưới bên trái đến góc trên bên phải của bất kỳ ô đã cho nào?

Để có được điều này

<table> 
    <tr> 
     <td class="crossOut">A1</td> 
     <td>B1</td> 
    </tr> 
    <tr> 
     <td>A2 Wide</td> 
     <td class="crossOut">B2<br/>Very<br/>Tall</td> 
    </tr> 
</table> 

để hiển thị này

Answer 1

Tôi không biết nếu là cách tốt nhất, nhưng tôi không thể làm điều đó với CSS. Câu trả lời của tôi là trong jQuery:

http://jsfiddle.net/zw3Ve/13/

$(function(){ 
    $('.crossOut').each(function(i){ 
     var jTemp = $(this), 
      nWidth = jTemp.innerWidth(), 
      nHeight = jTemp.innerHeight(), 
      sDomTemp = '<div style="position:absolute; border-color: transparent black white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+nHeight+'px; z-index:-2"></div>'; 

     sDomTemp += '<div style="position:absolute; border-color: transparent white white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+(nHeight-1)+'px; z-index:-1"></div>'; 

     jTemp.append(sDomTemp); 
    }); 
}); 

hoặc

http://jsfiddle.net/zw3Ve/16/ (với lớp CSS sạch)

CSS phần:

.crossOut .child{ 
    position:absolute; 
    width:0; 
    height:0; 
    border-style:solid; 
} 
.crossOut .black-triangle{ 
    z-index:-2; 
    border-color: transparent black white white; 
} 
.crossOut .white-triangle{ 
    border-color: transparent white white white; 
    z-index:-1; 
} 

jQuery mã:

$(function(){ 
    $('.crossOut').each(function(i){ 
     var jTemp = $(this), 
      nWidth = jTemp.innerWidth(), 
      nHeight = jTemp.innerHeight(), 
      sDomTemp = '<div class="child black-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+nHeight+'px; "></div>'; 

     sDomTemp += '<div class="child white-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+(nHeight-1)+'px;"></div>'; 

     jTemp.append(sDomTemp); 
    }); 
}); 

Điều tốt là nó hoạt động với bất kỳ chiều rộng và chiều cao nào của ô bảng.

Edit:

tôi đã không hài lòng với chất lượng của vẽ các hình tam giác thực hiện với biên giới CSS vì vậy tôi sử dụng css xoay. Tôi nghĩ rằng đây là một công việc tốt hơn (và các dòng được làm tốt hơn):

http://jsfiddle.net/zw3Ve/21/

(Sử dụng -sand-transform là dành cho IE6, vì vậy nó sử dụng là không bắt buộc.)

Edit2: cuối cùng phiên bản không có hỗ trợ cho IE7-IE8 (có vẻ như -sand-transform chỉ hoạt động theo kiểu CSS chứ không phải trong các kiểu được viết bởi JavaScript). Tôi đã thực hiện một phiên bản với khả năng tương thích với các trình duyệt cũ:

http://jsfiddle.net/zw3Ve/23/

Answer 2

Có thể. Try my solution:

.line { 
    width: 200px; 
    height: 50px; 
    border: 1px solid #cccccc; 
    margin: 10px; 
    padding: 10px; 
    position: relative; 
} 

.me { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    z-index: -1; 
} 


<div class="line">LINE! 
    <img src="http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png" class="me" /> 
</div> 

Answer 3

Tôi đã tìm thấy một giải pháp CSS-chỉ đơn giản sử dụng gradient tuyến tính:

Bạn chỉ có thể chỉ định một đường chéo bằng cách định nghĩa một gradient tuyến tính. Gradient tuyến tính trở thành một số màu dừng. Điểm bắt đầu và màu thứ hai giống nhau (= không có độ dốc). Cũng vậy với màu cuối cùng và trước. Màu sắc giữa chúng (khoảng 50%) được sử dụng cho đường chéo.

Bạn có thể kiểm tra nó ở đây:

td 
 
{ 
 
\t border: 1pt solid black; 
 
} 
 

 
td.diagonalRising 
 
{ 
 
\t background: linear-gradient(to right bottom, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%); 
 
} 
 

 
td.diagonalFalling 
 
{ 
 
\t background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%); 
 
} 
 

 
td.diagonalCross 
 
{ 
 
\t position: relative; 
 
\t background: linear-gradient(to right bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49.9%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 51%,rgba(0,0,0,0) 51.1%,rgba(0,0,0,0) 100%); 
 
} 
 

 
td.diagonalCross:after 
 
{ 
 
\t content:  ""; 
 
\t display:  block; 
 
\t position: absolute; 
 
\t width:  100%; 
 
\t height:  100%; 
 
\t top:   0; 
 
\t left:  0; 
 
\t z-index:  -1; 
 
\t background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%); 
 
}

<table> 
 
<tr><td>a</td><td class="diagonalRising">abc</td><td class="diagonalFalling">abcdefghijklmnopqrstuvwxyz</td><td class="diagonalCross">abcdefghijklmnopqrstuvwxyz<br>qaywsxedcrfvtgbzhnujmikolp</td></tr> 
 
</table>

Đáng tiếc là bạn chỉ có thể xác định chiều rộng dòng. Tôi đã thử nghiệm nó với Firefox, Chrome, Opera và Internet Explorer. Có vẻ ok trong tất cả chúng (nhưng hơi khác trong IE so với những người khác).