隐藏的溢出不适用于伪前后元素答案

【问题标题】：Overflow hidden is not working on pseudo before and after elements隐藏的溢出不适用于伪前后元素
【发布时间】：2020-01-12 22:42:31
【问题描述】：

美好的一天！我正在尝试在 css 中制作一个带有前后的形状。问题是之前和之后有溢出，我想隐藏它。将其隐藏在名为 shape 的 de 容器中时，无法使用 overflow-x: hidden 和 max-width: 100% 来做到这一点。我仍然可以在 Safari 中滚动，但不能在 Chrome 中滚动。为什么是这样？我该如何解决这个问题？提前致谢。

小提琴：https://jsfiddle.net/b9m5tpxq/

    padding: 0; 
    box-sizing: border-box;
    margin: 0;
}



.shape{
    background-color: red;
    padding-top: 200px;
    padding-bottom: 200px;
    padding-bottom: 200px;
    margin-top: 10rem;
    position: relative;
    height: inherit;
}

.shape p{
    width: 70%;
    margin: 0 auto;
    font-family: sans-serif;
}

.shape::after{
    content:'';
    height:120px;
    width: 120%;
    display: inline-block;
    background-color: green;
    transform: rotate(-2deg);
    position: absolute;
    bottom: -3rem;
    border-bottom: 2px solid black;
    left: 0;
    right: 0;
    margin-left: -1rem;
    margin-right:-1rem;
}

.shape::before{
    content:'';
    height:120px;
    width: 120%;
    display: inline-block;
    background-color: blue;
    transform: rotate(2deg);
    position: absolute;
    top: -3rem;
    border-top: 2px solid black;
    left: 0;
    right: 0;
    margin-left: -1rem;
    margin-right: -1rem;
}

<body>
<div class="shape">
<p>Text</p>
</div>
</body>

【问题讨论】：

标签： html css pseudo-element

【解决方案1】：

只使用背景做不同的形状，你不会有任何溢出问题：

.box {
  padding:70px 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% 20px;
  background-repeat:no-repeat;
  border-bottom:50px solid green;
  border-top:   50px solid blue;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

并配合 CSS 变量轻松控制形状：

.box {
  --b:50px; /* border width*/
  --a:20px; /* to control the angle (use vw unit to keep the same angle on resize)*/

  padding:calc(50px + var(--a)) 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% var(--a);
  background-repeat:no-repeat;
  border-bottom:var(--b) solid green;
  border-top:   var(--b) solid blue;
  clip-path:polygon(0 0,100% var(--a),100% calc(100% - var(--a)),0 100%);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

<div class="box" style="--a:5vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

<div class="box" style="--a:80px;--b:5px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

【讨论】：

哇，你现在帮了我这么多！非常感谢。我也在考虑这个问题，但我从来没有弄清楚如何正确地做到这一点。并且是否也可以在蓝色和绿色形状的顶部和底部添加 1 或 2 px 黑色的边框？
@Dehv27 我所做的可能很难添加边框。会考虑另一个想法。顺便说一句，您可以将其作为一个单独的问题，因为它超出了此问题的范围。另一个问题可能对您和其他人更有帮助。
好的，我会这样做，但现在，非常感谢您的帮助。这太棒了:)
@Dehv27 欢迎，如果它解决了您的问题，请不要忘记投票/接受答案