Как я могу достичь «вырезать» в дизайне?

Question

Я пытаюсь добиться следующего дизайна: https://imgur.com/a/iXhOTfR

Моя проблема в том, что я не хочу использовать изображение в формате png, поскольку оно слишком большое. Есть ли другой способ добиться эффекта обрезанного изображения?

Я использую файл SVG для левой синей части. Это то, чего я достиг до сих пор: https://imgur.com/a/bZSjOUH

Вот мой HTML:

<section class="section">
    <div class="section-mask">
        SVG FILE
    </div>
    <div class="container-full">
        <div class="row">
            <div class="col-lg-6 column-text">
                <h2 class="title">
                    Section Title
                </h2>
                <div class="paragraph">
                    Section Content
                </div>
            </div>
            <div class="col-lg-6 column">
                Section Widget
            </div>
        </div>
    </div>
</section>

Answer 1

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

Эти инструменты в основном включают в себя:

• clip-path, &
• linear-gradient

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

Путь обрезки может использоваться для придания формы элементу, и хотя логика «рисования» нужной фигуры может быть сложной, у Беннетта Фели есть отличный инструмент под названием Clippy для разработки кода.

Вот демонстрационная версия 'cut design' на CodePen , и я также включу здесь рабочий код с кратким объяснением.

HTML написан, предполагая, что это является частью визуальной обработки заголовка страницы, но адаптируется по мере необходимости. CSS - это быстрый и грязный макет с клип-траекторией, организованной таким образом, чтобы можно было легко сканировать и корректировать пары чисел:

header {
  background-image: url(//unsplash.it/1600x900);
  background-size: cover;
}

.cut-container {
  background-image: linear-gradient(80deg, hsla(180, 100%, 40%, .5) 44.9%, white 45.1%);
}

.cut {
  background: url(//unsplash.it/1600x600) center center;
  background-size: cover;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 70%,
    0 100%
  );
  height: 20em;
}


.cut2 {
  background:  hsl(220,50%,30%);
  clip-path: polygon(
    50% 95%, 
    100% 25%, 
    100% 100%, 
    0 100%, 
    0 25%);
  height: 15em;
}

<header>
  <div class="cut-container">
    <div class="cut"></div>
    <div class="cut2"></div>
  </div>
</header>

Clip-path здесь используется для создания многоугольника, а пары чисел указывают, где расположены углы. Каждая пара соответствует количеству углов в форме, поэтому один из них является трапецией, а другой по сути является нечетным пятиугольником в форме буквы М.

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

Наконец, обратите внимание, что для углового линейного градиента с резким срезом большинство мониторов будут давать неровные края. Чтобы добиться сглаживания и появления сглаженного края, используйте значения, близкие, но не точные. Здесь .cut-container использует 44,9% и 45,1%, что выглядит гладко.

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

Answer 2

Как насчет создания повернутого блока CSS, который накладывает изображение, оставаясь под svg?

body {
  overflow-x: hidden;
}

.image {
  background: grey;
  width: 100%;
  height: 100px;
}

.cut {
  border: 1px solid red;
  width: 200%;
  height: 150px;
  transform: rotate(-5deg);
  background: white;
  padding: 50px;
  transform-origin: 0% 50%;
  position: absolute;
}

.svg {
  border: 1px solid green;
  position: relative;
  z-index: 1;
}

<div class="image">This would be the image</div>
<div class="cut">This is the CSS block</div>
<div class="svg">This would be the SVG</div>