क्या CSS3 का उपयोग करके एक विकर्ण रेखा खींचना संभव है?

Question

मुझे पता है कि create a circle using CSS3

क्या यह एक विकर्ण खींचना संभव है?

Answer 1

हाँ यह, है वहाँ के लिए

सेट पृष्ठभूमि रंग बनाने एक और संभावना है:

वाई कहां hr तत्व या अन्य तत्व का उपयोग कर सकते हैं और इसे घुमा सकते हैं। यहाँ एक डेमो है:

और हाँ यह IE में काम करता है

http://jsfiddle.net/LqFAX/

-moz-transform: rotate(7.5deg); 
    -o-transform: rotate(7.5deg); 
-webkit-transform: rotate(7.5deg); 
    -ms-transform: rotate(7.5deg); 
     transform: rotate(7.5deg); 
      filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
        M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')"; 

      zoom: 1; 

Answer 2

आप कर सकते हैं:

1. HTML तत्व (div) पारदर्शी
2. सेट रंग एक सीमा के
3. बारी बारी से

Answer 3

यहाँ पूरा नमूना हैं :) करने के लिए, तो आप सिर्फ दूत और अपने आयामों पर अनुवाद आधार के साथ खेलने के लिए की जरूरत है।

<div style="background-color: #BCBCBC; width: 100px; height: 50px; padding: 0; margin: 0"> 
    <div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg); "></div> 
</div>