在元素中創建響應對角線

Question

不知道這是否可行，但是如何創建從元素左上角到右下角的1px對角線，無論該元素的寬度和/或高度如何？從線性漸變

Answer 1

您可以以多種方式做到這一點。

1）背景圖像

1.1）SVG

可以創建一個SVG直接作爲內聯代碼，並使用它用於繪製線。使用這個，你可以達到很好的效果，如陰影，漸變，虛線，等等。在css background-image元素中使用svg也是可行的。

jsfiddle

<svg style='width: 100%; height: 100%;'> 
    <line x1="0" y1="100%" x2="100%" y2="0" 
     style="stroke:rgb(0,0,0);stroke-width:1"/> 
</svg> 

1.2）修復圖像（PNG，JPG，...）

你也可以使用一個簡單的圖像作爲背景圖像上滿格。

jsfiddle

2）創建線性漸變背景

jsfiddle

.testDiv { 
    width: 300px; 
    height: 300px; 
    background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%); 
} 

這是如何工作的？

• 定義從左上角的梯度到右下
• 顏色是透明，直到50％ - 1個像素和從50％再次透明結束

（讀更多here）

3）旋轉內的div（僅在正方形的div）

jsfiddle

當調整testDiv的大小時，行應保持對角線。

.testDiv{ 
    width: 600px; 
    height: 600px; 
    background-color: gray; 
} 

.lineDiv { 
    position: relative; 
    top: 29%; 
    left: 29%; 
    width: 142%; 
    height: 142%; 
    border-left: solid thin blue; 
    transform: rotate(45deg); 
} 

這是如何工作的？

• 外div有一個尺寸（可以是動態的太）
• 內div有位置相對的，並且寬度和高度被設置爲
• 頂部和左側設定爲29％142％（28.7）

- > 142 = SQRT（100^2 + 100^2）（見phytagoras）

Answer 2

背景圖片應該做的：

body { 
 
    background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%) yellow; 
 
    /*demo purpose */ 
 
    height:50%; 
 
    width:50%; 
 
    margin:auto; 
 
    } 
 

 
html { 
 
    display:flex; 
 
    height:100vh; 
 
    background:white; 
 
    } 
 
/* end demo purpose */

運行段整頁和調整窗口的瀏覽器測試行爲