Скрытое переполнение не работает с псевдо-элементами до и после

Добрый день! Я пытаюсь создать форму в css до и после. Проблема в том, что до и после переполнения, и я хочу скрыть это. Когда он скрывается в контейнере с именем shape, это невозможно сделать с помощью overflow-x: hidden и max-width: 100%. Тем не менее я могу прокручивать в сафари, но не в 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
person Dehv27    schedule 12.01.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сделайте форму по-другому, используя только фон, и у вас не будет проблем с переполнением:

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

person Temani Afif    schedule 12.01.2020
comment
Вау, ты сейчас так сильно мне помогаешь! Огромное спасибо. Я тоже думал об этом, но так и не понял, как это сделать правильно. И можно ли добавить черную рамку в 1 или 2 пикселя вверху и внизу сине-зеленой фигуры? - person Dehv27; 13.01.2020
comment
@ Dehv27 с тем, что я сделал, вероятно, будет сложно добавить границу. Подумаю о другой идее. Кстати, вы можете задать это как отдельный вопрос, поскольку он выходит за рамки этого. Другой вопрос может быть более полезным для вас и других. - person Temani Afif; 13.01.2020
comment
Хорошо, я сделаю это, но сейчас большое спасибо за вашу помощь. Это круто :) - person Dehv27; 13.01.2020
comment
@ Dehv27 добро пожаловать, не забудьте проголосовать / принять ответ, если он решит вашу проблему - person Temani Afif; 13.01.2020