對角線上的一個div

Question

我已經編碼這個，但我只是想知道是否有一個更簡單的方法來做到這一點？我的方式似乎有點「不好」，特別是因爲我需要將內容放在div的中間。

這裏是我到目前爲止的代碼：

body { 
 
    padding-top: 20px; 
 
} 
 
#line { 
 
    border-style: solid; 
 
    border-width: 90px 100vw 0 0; 
 
    border-color: white #fafafa transparent transparent; 
 
    transform: scale(1.0001); 
 
} 
 
.wrap { 
 
    background-color: #fafafa; 
 
    text-align: center; 
 
    padding-bottom: 100px; 
 
} 
 
hr { 
 
    width: 100px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<div id="line"></div> 
 
<div class="wrap"> 
 
    <h2>Title</h2> 
 
    <hr> 
 
    <p>Text goes here</p> 
 
    <a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a> 
 
</div>

我不想使用SVG，雖然。我試圖用CSS來實現這一點。

Answer 1

我不會僅僅爲了這個效果而使用一個元素。這是設計，所以將它與標記分開並保存在CSS中將是理想的。您可以改爲使用僞元素。你可以製作一個很寬的，並用transform: rotate()來創建一條對角線。

body { 
 
    padding-top: 20px; 
 
} 
 
.wrap:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -50px; 
 
    left: -100%; 
 
    right: -100%; 
 
    bottom: 50%; 
 
    background: #fafafa; 
 
    transform: rotate(-2.5deg); 
 
    z-index: -1; 
 
} 
 
.wrap { 
 
    background-color: #fafafa; 
 
    text-align: center; 
 
    padding-bottom: 100px; 
 
    margin-top: 100px; 
 
    position: relative; 
 
} 
 
hr { 
 
    width: 100px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="wrap"> 
 
    <h2>Title</h2> 
 
    <hr> 
 
    <p>Text goes here</p> 
 
    <a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a> 
 
</div>

Answer 2

您可以使用一個div無論是邊框還是在div本身設定高度，然後使用CSS變換旋轉即transform: rotate(7deg);

https://www.w3schools.com/cssref/css3_pr_transform.asp

您的解決方案是偉大的，雖然，有效的使div來覆蓋頁面。