Css 如何制作截面的三角形顶部/底部？

我想在剖面底部做一个三角形。 但这不是一种回应的方式。。。当我调整窗口大小时，：before和：after之间的空间越来越大

如何用另一种方法制作

JSFIDLE演示：

你好，世界！
你好，多米尼克！
#s1{
背景颜色：绿色；
填充：160px 0px；
}
#s2{
背景色：#330099；
填充：160px 0px；
}
#s1：之前{
位置：绝对位置；
内容：“；
底部：40px；
宽度：51%；
高度：150像素；
左：0；
背景颜色：绿色；
变换：旋转（8度）；
z指数：9999；
}
#s1：之后{
位置：绝对位置；
内容：“；
底部：40px；
宽度：51%；
高度：150像素；
右：0px；
背景颜色：绿色；
变换：旋转（-8度）；
z指数：9999；
}

您可以使用渐变背景和背景大小：

部分{
背景颜色：黄色；
保证金：0；
填充：2.5%1em 0.01em；/*别忘了给文本/三角形留出一些空间*/
}
章节：之后{
内容：''；
填充顶部：5%；/*这意味着家长宽度的5%，根据您的需要进行调整*/
位置：绝对位置；
左：0；
右：0；
背景：线性渐变（左下角，黄色49%，透明51%）0 0不重复，线性渐变（右下角，黄色49%，透明51%）100%0不重复；
背景大小：50%50%；
}
部分：第n个子项（偶数）{
背景：紫色；
}
节：第n个孩子（偶数）：之后{
背景：线性渐变（左下，紫色49%，透明51%）0 0不重复，线性渐变（右下，紫色49%，透明51%）100%0不重复；
背景大小：50%50%；
}

---

您可以使用渐变背景和背景大小：


部分{
背景颜色：黄色；
保证金：0；
填充：2.5%1em 0.01em；/*别忘了给文本/三角形留出一些空间*/
}
章节：之后{
内容：''；
填充顶部：5%；/*这意味着家长宽度的5%，根据您的需要进行调整*/
位置：绝对位置；
左：0；
右：0；
背景：线性渐变（左下角，黄色49%，透明51%）0 0不重复，线性渐变（右下角，黄色49%，透明51%）100%0不重复；
背景大小：50%50%；
}
部分：第n个子项（偶数）{
背景：紫色；
}
节：第n个孩子（偶数）：之后{
背景：线性渐变（左下，紫色49%，透明51%）0 0不重复，线性渐变（右下，紫色49%，透明51%）100%0不重复；
背景大小：50%50%；
}
也许可以使用两个三角形，而不是使用两个矩形（jsfiddle演示：）

记住对绝对定位元素的容器使用position属性。
也许可以使用两个三角形，而不是使用两个矩形（JSFIDLE demo:）

记住对绝对定位元素的容器使用position属性。
对我来说，它看起来不像三角形。这是你想的吗？在我看来，那不是一个真正的三角形。这是你想的吗？你的问题很好，但我有两个问题：如何使边界更加清晰？2） 如何为该图像制作三角形@用户3313798 1）将2种渐变颜色设置为不同但接近的值，以模糊边缘，但首先执行2:）2）增加填充顶部，使其变为书写时不太平坦的三角形。代码笔站在那里现场玩，帮助你们理解它是如何工作的，但这个紫色部分必须是紫色的。我把它包括在这个白色渐变的顶部。我应该更改什么？@user3313798这里是一个变体，对于颜色，请在代码中搜索它们并根据您的需要进行更新。如果您喜欢，请慢慢熟悉这段代码，这样它就属于您了；），如果你认为这个答案有用，你也可以投上一票。。。只是说谢谢，但这并不理想：（但我知道这是一个解决方案。）（你的问题很好，但我有两个问题：如何使边界更清晰？2）如何为这张图像制作三角形？@user3313798 1）将两种渐变颜色设置为不同但相近的值以模糊边缘，但首先要做2:）2）增加衬垫顶部，使其变成一个不太平坦的三角形。代码笔站在那里现场玩，帮助你们理解它是如何工作的，但这个紫色部分必须是紫色的。我把它包括在这个白色渐变的顶部。我应该更改什么？@user3313798这里是一个变体，对于颜色，请在代码中搜索它们并根据您的需要进行更新。如果您喜欢，请慢慢熟悉这段代码，这样它就属于您了；），如果你认为这个答案有用，你也可以投上一票。。。只是说谢谢，但这并不理想：（但我知道这是一个解决方案。）(
<section id="s1">
     <h1>Hello World !</h1>
</section>
<section id="s2">
     <h1>Hello Dominik !</h1>
</section>

#s1 {
    background-color: green;
    padding: 160px 0px;
}
#s2 {
    background-color: #330099;
    padding: 160px 0px;
}
#s1:before {
    position: absolute;
    content:"";
    bottom: 40px;
    width: 51%;
    height: 150px;
    left: 0;
    background-color: green;
    transform: rotate(8deg);
    z-index: 9999;
}
#s1:after {
    position: absolute;
    content:"";
    bottom: 40px;
    width: 51%;
    height: 150px;
    right: 0px;
    background-color: green;
    transform: rotate(-8deg);
    z-index: 9999;
}

#s1{
  background-color: green;
  padding: 160px 0px;
  position:relative;
}

#s1:before{
  position: absolute;
  bottom:-40px;
  left:50%;
  transform:translateX(-50%);
  content: "";
  width: 0; 
  height: 0; 
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 40px solid green;
  z-index: 9999;
}

#s1:after{
   position: absolute;
  bottom:-40px;
  left:50%;
  transform:translateX(-50%);
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #330099;
  z-index: 9999;
}