तालिका कक्ष के भीतर एक विकर्ण रेखा कैसे बनाएं?

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

अगर सबसे अच्छा तरीका है मैं नहीं जानता, लेकिन मैं ऐसा नहीं कर सकते सीएसएस के साथ कि। मेरा जवाब 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 वर्ग क्लीनर)

सीएसएस हिस्सा:

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

अच्छी बात यह है कि यह किसी तालिका कक्ष की किसी भी चौड़ाई और ऊंचाई के साथ काम करता है।

संपादित करें:

मैं सीएसएस सीमाओं के साथ बनाया त्रिकोण के प्रतिपादन की गुणवत्ता के साथ खुश नहीं था तो मैं सीएसएस रोटेशन का इस्तेमाल किया। मुझे लगता है कि यह एक बेहतर काम है (और लाइनों बेहतर प्रस्तुत करना हैं):

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

(का उपयोग करते हुए -sand-transform IE6 के लिए है, इसलिए इसका इस्तेमाल वैकल्पिक है।)

EDIT2: पिछले संस्करण को आई 7-आईई 8 के लिए समर्थन नहीं मिला है (ऐसा लगता है कि सैंड-ट्रांसफॉर्म केवल सीएसएस शैलियों में काम करता है और जावास्क्रिप्ट द्वारा लिखे गए शैलियों में नहीं)। मैं पुराने ब्राउज़रों के साथ संगतता के साथ एक संस्करण बनाया:

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

Answer 2

यह संभव है। 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

मैं एक सरल, सीएसएस-केवल रेखीय ग्रेडिएंट का उपयोग कर समाधान मिल गया है:

आप बस एक रेखीय ढाल को परिभाषित करते हुए एक विकर्ण लाइन निर्दिष्ट कर सकते हैं। रैखिक ढाल कई स्टॉप रंग बन जाता है। शुरुआत और दूसरा रंग समान है (= कोई ढाल नहीं)। वही अंतिम और पूर्व-आखिरी रंग के लिए जाता है। उनके बीच के रंग (लगभग 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>

दुर्भाग्य से आप मुश्किल से लाइन चौड़ाई निर्दिष्ट कर सकते हैं। मैंने फ़ायरफ़ॉक्स, क्रोम, ओपेरा और इंटरनेट एक्सप्लोरर के साथ इसका परीक्षण किया है। यह उन सभी में ठीक दिखता है (लेकिन दूसरों की तुलना में आईई में थोड़ा भिन्न)।