Элементы, скрытые по пути клипа, все еще увеличивают длину страницы - PullRequest
Новая
       29

Элементы, скрытые по пути клипа, все еще увеличивают длину страницы

0 голосов
/ 15 мая 2018

Я пытаюсь открыть HTML-страницу с диагональной рамкой внизу справа. Ну, на самом деле он имеет полупрозрачную границу рядом со сплошной рамкой (чтобы повторить некоторые элементы дизайна на других страницах). Я создал эту линию, используя два слегка повернутых прямоугольника, один в псевдоэлементах: before и один в: after. 

#header_block_unlimited:before { 
  content: '';
  position: absolute;
  width: 50%;
  height: 130%;
  right: -38.5%;
  top: -10%;
  bottom: -10%;
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}

#header_block_unlimited:after { 
  content: '';
  position: absolute;
  width: 50%;
  height: 130%;
  right: -40%;
  top: -10%;
  bottom: -10%;
  background-color: #F95E62;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}

Полагаю, я мог бы использовать форму SVG, но я думаю, что это займет слишком много времени для точной настройки, особенно потому, что длина страницы должна быть динамической (должна быть в диапазоне от 400 до 1500 пикселей) .

Я попытался использовать overflow-y: hidden, но это приводит к появлению полосы прокрутки на оси x, отчасти потому, что в дизайне также необходимо использовать полосы шириной браузера (см. https://css -трюки. ком / полный браузер ширина-бары / )

Клип-путь к спасателю! Ну, к сожалению, не совсем. Клип-траектория обрезает биты внизу прямоугольника, которые мне не нужны, но, к сожалению, эти биты по-прежнему считаются по длине страницы, что означает, что под моим колонтитулом есть пробел.

Вот код пути клипа, который назначен родительскому контейнеру ... 

clip-path: inset( -100vw -100vw 0 -100vw);

Вот кодекс проблемы .

Любая помощь с этим будет высоко ценится. Идеальным решением было бы каким-то образом обрезать избыток повернутых прямоугольников, чтобы это не увеличивало длину страницы. Или другой способ достижения диагональной границы RHS.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Мне понравилась простота ответа Темани Афифа, но я не смог заставить его работать без размытой или пиксельной диагональной линии.

После некоторой путаницы я смог решить проблему, используя файл SVG, созданный из оригинальной иллюстрации Adobe Illustrator. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
height="1700px" width="300px" viewBox="0 14 300 1715">
/* Note that the SVG needs to have an implicit height and width
    to avoid problems in Firefox */
    <defs>
        <style>
            .cls-1{opacity:0.36;}
            .cls-2{fill:#fff;}
            .cls-3{fill:#f95e62;}
        </style>
    </defs>
    <title>Asset 3</title>
    <g class="cls-1">
        <polyline class="cls-2" points="167.05 13.28 8.5 1721 334 1721 334 1721 334 13"/>
    </g>
    <polyline class="cls-3" points="334 1721 334 13 197 13 40.25 1720.99"/>
</svg>

Затем я добавил его в div прямо внутри моего основного контейнера div. 

  <div id="header_triangle">
    <img src="[path to the svg]" />
  </div>

Для которого стиль выглядит следующим образом ... 

#header_triangle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 100; /* needs to sit on top */
}

#header_triangle img {
    height: 102%;
    float: right; /* to Fix an issue in FF */
}

Вот рабочий CodePen .

0 голосов
/ 15 мая 2018

Вместо clip-path и сложного преобразования я бы создал простой линейный градиент, чтобы создать это: 

body {
  margin:0;
  height:100vh;
  background:linear-gradient(100deg, transparent 70%,#F95E62 70.5%);
}
...