Скрытие переполнения элемента stati c (проблема Clip-path с Edge) - PullRequest
Новая
       91

Скрытие переполнения элемента stati c (проблема Clip-path с Edge)

1 голос
/ 16 июня 2020

Я делаю макет, в котором есть два абсолютно позиционных элемента, которые расположены точно так же. Один должен быть отрезан контейнером, а другой элемент будет виден вне указанного контейнера. overflow: hidden не будет работать, поскольку контейнер должен быть position:static, чтобы оба абсолютных элемента располагались относительно одного и того же родителя. Поэтому я использовал clip-path: inset(0 0 0 0), который отлично работает во всех браузерах, о которых я беспокоюсь, кроме Edge (pre-chromium). Я скрываю эффект для IE.

Мы будем благодарны за любые предложения по решению, которое будет работать и для Edge. 

body{
  padding: 100px;
  position: relative;
  margin: 0;
}
.container{
  position: static;
  max-width: 1280px;
  padding: 100px;
  background: lightblue;
/*   height: 500px; */
  clip-path: inset(0 0 0 0);
}
.swoop{
  position: absolute;
  top: 0;
  right: 0;
}
.col{
  width: 40%;
}
<body>
  <img class="swoop swoop-90-y" src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg" alt="Yellow swooping stripe" srcset="">
  <div class="container">
    <img class="swoop swoop-90-y pos-abs " src="https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg" alt="Yellow swooping stripe" srcset="">
      <div class="col">
        <h1>Hello world</h1>
        <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula. Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
        </div>
  </div>

1 Ответ

1 голос
/ 16 июня 2020

Сделайте это по-другому, в зависимости от фона, на котором нужно использовать трюк background-attachment:fixed

body {
  padding: 100px;
  position: relative;
  margin: 0;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   top right fixed no-repeat;
}

.container {
  max-width: 1280px;
  padding: 100px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   top right fixed no-repeat, 
   lightblue;
}

.col {
  width: 40%;
}
<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>

Также, как показано ниже, где вам нужно настроить background-position дочернего элемента в соответствии с родительским 

body {
  position: relative;
  margin: 0;
}

.container {
  max-width: 1280px;
  padding:80px;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-yellow.svg) 
   calc(50% + 200px) 0 no-repeat;
}

.col {
  padding: 100px;
  width:50%;
  margin:auto;
  background: 
   url(https://webcdn-compassion-ca.s3.amazonaws.com/_2/img/covid/swoop-90deg-white.svg) 
   calc(50% + 200px) -80px no-repeat, 
   lightblue;
}
<div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>
  
  <div class="container">
    <div class="col">
      <h1>Hello world</h1>
      <p>Fusce pellentesque, leo vel posuere volutpat, erat ligula cursus metus, sed blandit dui ligula eu erat. Mauris aliquam nec sem in tincidunt. Quisque ultrices quam eget eros elementum, nec venenatis mauris varius. Sed blandit rhoncus augue id vehicula.
        Nulla sapien nulla, maximus in ornare et, condimentum a turpis. In vel tristique ligula. Morbi id massa quis nisi imperdiet semper. Nam convallis ut risus id tristique. Praesent tempus aliquam magna a consequat.</p>
    </div>
  </div>
...