Question

我的角度顶部和底部div面临以下问题。它应该像我在这里提供的图片一样。我想在div的顶部使用before伪元素，在div的底部使用after，底部有点工作，但我只有top的问题。任何想法如何使用我的代码实现这种效果？

我希望它看起来像这样：

这是我到目前为止所拥有的：

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

View on JSFiddle

Answer 1

您遇到的问题是由于伪元素的position:absolute设置（之前/之后）。当您将位置设置为绝对时，元素不再具有要符合的任何容器边界，并且基于html主体左，右，上和下值定位。

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

这是使用css border属性而不是css3 transform属性的另一种方法。

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

希望这能解释使用边距调整绝对定位伪元素的原因。

Answer 2

我在你的div顶部添加了150px的保证金

编辑我还将歪斜程度更改为-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

我认为最简单的方法是在:before和:after中扭曲白色div，然后使用z-index将内容置于最前面。还添加了margin-top到h1，可根据需要进行调整。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

IF 静态宽度，效果更容易创建＆amp;使用边框控制：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

角度边缘顶部和底部

4 个答案: