斜角边缘顶部和底部

Question

我正面对以下问题，我的角度顶部和底部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

Answer 1

您遇到的问题是由于伪元素的position:absolute设置（之前/之后）。将位置设置为绝对时，元素不再具有任何符合的容器边界，并根据html正文的左，右，上，下值进行定位。

现在你的主要容器的例子div的位置从顶部开始，你的伪元素需要稍微高于它来显示有角度的背景，但由于伪元素不是实际移动主div的块元素到它的position:absolute设置。您需要添加顶部边距来移动主div，以便在其上方显示设置的伪元素。

这是另一种使用CSS边框属性而不是css3变换属性的方法。

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

希望这说明你使用利润来调整绝对定位伪元素的原因。

Answer 2

我加保证金的为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); 
} 

Answer 3

我认为这是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>

Answer 4

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>