傾斜對角線的CSS

Question

某些CSS專家可以幫助指導我通過CSS實現斜線。我無法附加圖片。我知道這可以做，但缺乏專家知識的CSS我錯過了實現這一目標的方式。我指的是this example。如果你走到頁面的結尾（slanthowto.html），那麼只有一張圖像只顯示傾斜的黑色線條......我想實現它。

問候，

Answer 1

這對傾斜的黑線的CSS和HTML代碼：

<div style="position: relative; width: 100px; height: 100px;"> 
    <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px;" class="borderdraw"><!-- --></div> 
    <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px;" class="borderdraw"><!-- --></div> 
</div> 

的CSS：

.borderdraw { 
    border-style:solid; 
    height:0; 
    line-height:0; 
    width:0; 
} 

編輯：您還可以將屬性從複製風格屬性的類：

<div style="position: relative; width: 100px; height: 100px;"> 
    <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div> 
    <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div> 
</div> 

Answer 2

請勿使用此方法。不認真，不要。看看頁面底部的日期。它說

最後修改時間：星期四1月30日21點56分十六秒浪漫標準時間2003

那是七年前。科技繼續前進。我們不再這樣做了。只需使用任何圖形處理軟件，爲自己畫一個三角形，然後使用這兩種技術中的任何一種將圖像粘貼到您的網頁中。

首先，圖像。這裏有一個我在以前畫圖創建：

然後，無論是img標籤

<img src="triangle.png" alt="Triangle!" /> 

或背景，與CSS方法

<div class="triangle"></div> 


.triangle { 
    background: url('triangle.png') no-repeat; 
    width: 120px; 
    height: 120px; 
} 

這是更好的，不是嗎」它。

Answer 3

5年後更新（2015）...

2D轉換現在享受更好的支持。他們還將完成消除前面方法中可能看到的「緊縮」或鋸齒狀邊緣的工作。下面的CSS。根據caniuse.com

.slanted-line { 
    width: 300px; 
    background: black; 
    height: 2px; 

    /* bonus rounded edges */ 
    border-radius: 1px; 

    transform: rotate(-45deg); 
    -os-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -webkit-transform: rotate(-45deg); 

    /* helps with positioning */ 
    transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -webkit-transform-origin: 100% 100%; 
} 

瀏覽器支持：

• IE 9+
• 火狐31+
• 鉻31+
• 的Safari 7+
• 歌劇27+
• iOS Saf ari 7.1+
• Android瀏覽器4。1+
• 的移動版Chrome 41+

DEMO EXAMPLE