Введение

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

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

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

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

CSS-путь клипа

Если вы, как и я, менее знакомы со свойством CSS clip-path, оно создает область отсечения, которая определяет, какие части элемента должны отображаться. Части, находящиеся внутри области, отображаются, а те, что находятся за ее пределами, скрыты.

Демо из документации MDN clip-path. Различные варианты обрезки обеспечивают разные виды воздушного шара и текста.

Свойство clip-path может принимать самые разные значения:

• , который принимает такие значения, как URL-адрес элемента SVG с определенным контуром обрезки.
• , который принимает такие значения, как поля и рамки.
• , который принимает такие значения, как Circle() и rect().
• global-values, который принимает такие значения, как наследование и возврат.

Значения и можно даже объединить в один клип-путь.

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

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

Одним из свойств , которые принимает clip-path, является polygon(), и в конечном итоге это оказалось решением, которое мне нужно для моего наклонного фона.

Многоугольник, который мне нужно было воссоздать с помощью CSS

Серый многоугольный фон, который мне нужно было создать с помощью CSS.

Изображение выше — это скриншот раздела серого фона, который мне нужно было воссоздать с помощью свойства CSS clip-pathpolygon(). И первое, что мне нужно было сделать, это создать несколько HTML-элементов, к которым можно было бы применить CSS.

polygon() clip-path vs rect() clip-path

Возможно, вам интересно, почему я решил использовать свойство polygon() вместо свойства rect() с clip-path. Несмотря на то, что они похожи, функция Polygon() может создавать более сложные многоугольные формы и обеспечивает большую универсальность для сложных проектов, принимая пары координат для определения каждой вершины многоугольника, тогда как rect() может обрабатывать только прямоугольные формы.

Настройте HTML и CSS

Сайт, над которым я работал, основывался на генераторе статических сайтов Hugo, фреймворке на основе Go. Хьюго использует шаблоны для отображения HTML-кода сайта, поэтому приведенный ниже пример кода должен показаться вам относительно знакомым, если вы знаете HTML.

Примечание о шаблонах:

Если вы когда-либо использовали компоненты JSX, Node.js с Pug или Handlebars или Jekyll — шаблоны Hugo похожи: HTML-элементы с переменными Go и функциями, добавленными с помощью {{ }} для отображения правильной информации везде, где есть шаблоны. вводятся.

Вот код того, что я назвал «разделом головоломок» на странице из-за части головоломки на переднем плане этого раздела. Для целей и ясности этой статьи я заменил переменные Go, внедренные в шаблон, на сгенерированный HTML.

single.html

  

    

    

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
        
      
    

Этот участок кода относительно компактен, но заслуживает обсуждения. Помимо элементов HTML, существует немало классов CSS, взятых из библиотеки Bootstrap, одной из оригинальных фреймворков CSS с открытым исходным кодом для адаптивного веб-дизайна.

Среди пользовательских классов, таких как about-body, которые я использовал для добавления собственного стиля, есть такие классы, как контейнер, строка, col-12 или col-md-6, mb-5 и mb-3.

Все последние классы являются классами Bootstrap, которые служат для того, чтобы элементы текста и изображения на экране разделяли ширину страницы, когда область просмотра превышает определенную ширину (col-md-6), или применяют поле-дно определенное количество в теги

(mb-3 или mb-5).

Однако классы Bootstrap не имеют отношения к делу в этом посте, класс, на котором следует сосредоточиться, — это puzzle-section, который обертывает весь текст и изображение фрагмента головоломки.

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

Добавьте CSS-путь для формирования раздела-головоломки.

Поскольку я не совсем понимал, как придать обычному прямоугольному

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}