斜角邊緣頂部和底部

-1

我正面對以下問題，我的角度頂部和底部div。它應該像我在這裏提供的圖片。我想爲div的頂部使用before僞元素，對於div的底部使用after，底部有點不錯，但我只有頂部的問題。任何想法如何使用我的代碼來實現這種效果？斜角邊緣頂部和底部

我希望它看起來像這樣：

這是我到目前爲止有：

.example { 
 
    width: 100%; 
 
    height: 700px; 
 
    position: relative; 
 
    background: red; 
 
} 
 

 
.example:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: inherit; 
 
    z-index: -1; 
 
    bottom: 0; 
 
    transform-origin: left bottom; 
 
    transform: skewY(-10deg); 
 
} 
 

 
.example:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: inherit; 
 
    z-index: -1; 
 
    top: 0; 
 
    transform-origin: top left; 
 
    transform: skewY(5deg); 
 
}

<div class="example"> 
 
    <h1>SOME CONTENT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p> 
 
    <h2>More Content</h2> 
 
</div>

View on JSFiddle

來源

2017-07-31 Peter Solvien

你想讓你的文字內容保持在紅色嗎？ –

是的，它應該在紅色背景 –

您遇到的問題是由於僞元素的position:absolute設置（之前/之後）。將位置設置爲絕對時，元素不再具有任何符合的容器邊界，並根據html正文的左，右，上，下值進行定位。

現在你的主要容器的例子div的位置從頂部開始，你的僞元素需要稍微高於它來顯示有角度的背景，但由於僞元素不是實際移動主div的塊元素到它的position:absolute設置。您需要添加頂部邊距來移動主div，以便在其上方顯示設置的僞元素。

這是另一種使用CSS邊框屬性而不是css3變換屬性的方法。

https://codepen.io/Nasir_T/pen/GNKLNQ

希望這說明你使用利潤來調整絕對定位僞元素的原因。

來源

2017-07-31 17:54:49

很好解釋。謝謝。我還有一個問題，在你的例子中，如何修復由100vh引起的橫向滾動？如果你向右滾動，你會看到小差距。 @ Nasir-T –

hmm在我的例子中沒有看到水平滾動。也許你把代碼放在容器中或者是引起它的東西。同時水平或垂直滾動與vh和vw只能由它的填充或邊緣，它是父容器，如果有的話。 –

感謝您的時間:)我發現我的錯誤，並從你的例子中學到:) –

我加保證金的爲150px到您的div

編輯我也改變了偏斜度至-5％，5％，而非+ 10％上

.example { 
    width: 100%; 
    h height: 700px; 
    position: relative; 
    background: red; 
    margin-top: 150px; 
} 

.example:after { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: inherit; 
    z-index: -1; 
    bottom: 0; 
    transform-origin: left bottom; 
    transform: skewY(-5deg); 
} 

.example:before { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: inherit; 
    z-index: -1; 
    top: 0; 
    transform-origin: top left; 
    transform: skewY(5deg); 
}

來源

2017-07-31 17:25:52

okey，謝謝，所以我必須在margin元素前面使用僞元素和僞元素使用margin-bottom來調整它們到底如何讓它們顯示？ –

我認爲這是d最容易在:before和:after中歪斜白色div，然後使用z-index將您的內容置於前面。還加入了margin-top至h1，可根據需要進行調整。

.example { 
 
    width: 100%; 
 
    height: 700px; 
 
    position: relative; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 
.example:after { 
 
    content: ""; 
 
    width: 110%; 
 
    height: 25%; 
 
    top: 0; 
 
    position: absolute; 
 
    background: white; 
 
    z-index: 1; 
 
    transform-origin: left bottom; 
 
    transform: skewY(-5deg); 
 
} 
 

 
.example:before { 
 
    content: ""; 
 
    width: 110%; 
 
    height: 25%; 
 
    bottom: 0; 
 
    position: absolute; 
 
    background: white; 
 
    z-index: 1; 
 
    transform-origin: left bottom; 
 
    transform: skewY(5deg); 
 
} 
 

 
.example h1, .example p { 
 
    position: relative; 
 
    z-index: 5; 
 
} 
 

 
.example h1 { 
 
    margin-top: 205px; 
 
}

<div class="example"> 
 
    <h1>SOME CONTENT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p> 
 
    <h2>More Content</h2> 
 
</div>

來源

2017-07-31 17:37:15

IF有一個靜態寬度，效果是很多更容易地創建&使用控制邊界：

.example { 
 
    width: 500px; 
 
    height: 700px; 
 
    position: relative; 
 
    background: red; 
 
    padding:100px 0px; 
 
} 
 
.example:after, 
 
.example:before { 
 
    content:''; 
 
    position:absolute; 
 
    border-right:solid 500px transparent; 
 
} 
 
.example:before { 
 
    top:0px; 
 
    border-top:solid 100px #FFF; 
 
} 
 
.example:after { 
 
    bottom:0px; 
 
    border-bottom:solid 100px #FFF; 
 
}

<div class="example"> 
 
    <h1>SOME CONTENT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p> 
 
    <h2>More Content</h2> 
 
</div>

來源

2017-07-31 17:53:45 hakJav

斜角邊緣頂部和底部

回答

相關問題