테이블 셀 내에서 대각선을 만드는 방법은 무엇입니까?

Question

주어진 셀의 왼쪽 하단 모서리에서 오른쪽 상단 모서리까지 대각선을 만들려면 어떻게해야합니까?

이

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

가 보여 얻으려면이

Answer 1

가장 좋은 방법 인 경우 나도 몰라,하지만 난 CSS로 그렇게 할 수 없습니다. 내 대답은 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); 
    }); 
}); 

또는

http://jsfiddle.net/zw3Ve/16/ (와 CSS 클래스 청소기)

CSS 부분 :

.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를 코드 :

$(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); 
    }); 
}); 

좋은 점은 테이블 셀의 너비와 높이와 함께 작동하는 것이 좋습니다.

편집 :

내가 CSS 테두리로 만든 삼각형의 렌더링의 품질에 만족하지 않았다 그래서 나는 CSS 회전을 사용했다. 나는 이것이 좋은 일이라고 생각 (그리고 라인은 더 나은 렌더링됩니다) :

는

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

(이것은 선택 사항입니다 사용할 수 있도록, -sand-transform은 IE6을위한 사용.)

Edit2가 : 마지막을 버전은 IE7-IE8을 지원하지 않습니다 (-sand-transform은 CSS 스타일에서만 작동하며 JavaScript로 작성된 스타일에서는 작동하지 않는 것 같습니다). 나는 오래된 브라우저와의 호환성 버전을 만든 :

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

Answer 2

그것은 가능하다. Try my solution : 나는 선형 그라디언트를 사용하여 간단한, CSS 전용 솔루션을 발견했습니다

.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

는 :

당신은 단순히 선형 그라데이션을 정의하여 대각선을 지정할 수 있습니다. 선형 그래디언트는 몇 가지 정지 색상이됩니다. 시작과 두 번째 색상은 동일합니다 (= 그라데이션 없음). 마지막 색깔과 마지막 색깔에 대해서도 마찬가지입니다. 그들 사이의 색상 (약 50 %)이 대각선으로 사용됩니다.

당신은 여기를 테스트 할 수

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>

불행하게도 당신이 거의 선 두께를 지정할 수 있습니다. 필자는 Firefox, Chrome, Opera 및 Internet Explorer로 테스트했습니다. 그것들은 모두 괜찮아 보이지만 (다른 IE에 비해 IE에서는 약간 다릅니다).