介绍

直到几年前，如果您想要网站的背景形状或部分不是矩形，您很可能需要设计师为您提供静态 PNG 或 JPEG 图像，并根据需要添加，但 CSS 已经从那时起，我的朋友们已经走了很长的路。

当我进行网站更新时，将页面上的内容分解为不同颜色的背景部分，在纯白色和柔和的灰色之间交替，我的设计模型包含了一个底部边缘向上倾斜的部分，右侧而不是像典型的块元素那样以完美的 90 度角穿过页面。

现在我可以要求设计师制作一个背景图像来为我做这件事，但我想看看我是否可以利用 CSS 的力量自己完成这件事。你瞧，我可以使用 CSS Clip-path。

DOM 中有趣的形状和视觉效果不再纯粹是设计师的领域，借助 CSS 剪辑路径等工具，开发人员有能力重塑元素，我将向您展示如何操作。

CSS 剪辑路径

如果您像我一样不太熟悉 CSS Clip-path 属性，它会创建一个剪切区域来设置应显示元素的哪些部分。显示区域内的部分，隐藏区域外的部分。

来自 MDN 剪辑路径文档的演示。不同的剪辑路径选项提供热气球和文本的不同视图。

clip-path 属性可以接受多种值：

• ，它接受定义了剪切路径的 SVG 元素的 url 之类的值。
• ，接受 margin-box 和 border-box 等值。
• ，接受 Circle() 和 rect() 等值。
• 全局值，接受继承和恢复等值。

和 值甚至可以在一个剪辑路径中组合在一起。

/* 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-path 的 Polygon() 属性重新创建的灰色背景部分的屏幕截图。我需要做的第一件事是创建一些 HTML 元素来应用 CSS。

polygon() 剪辑路径 vs rect() 剪辑路径

您可能想知道为什么我选择使用 Polygon() 属性而不是带有 Clip-path 的 rect() 属性。虽然两者相似，但 Polygon() 可以创建更复杂的多边形形状，并通过接受坐标对来定义多边形的每个顶点，为高级设计提供更大的多功能性，而 rect() 只能处理矩形形状。

设置 HTML 和 CSS

我正在开发的网站依赖于静态网站生成器 Hugo，这是一个基于 Go 的框架。 Hugo 使用模板来呈现网站的 HTML，因此如果您了解 HTML，下面的示例代码应该看起来相对熟悉。

模板说明：

如果您曾经使用过 JSX 组件、带有 Pug 或 Handlebars 的 Node.js，或者 Jekyll - Hugo 的模板都是类似的：带有 Go 变量和函数的 HTML 元素，散布在 {{ }} 中，以便在模板的任何位置呈现正确的信息被注入。

这是我昵称为页面“拼图部分”的代码，因为该部分的前景中有拼图。为了本文的目的和清晰起见，我用生成的 HTML 替换了注入模板中的 Go 变量。

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这样的自定义类中，我用它来添加自定义样式，其中有container、row、col-12或col-md-6、mb-5和mb-3等类。

后面的所有类都是 Bootstrap 类，它们的作用是当视口超过一定宽度 (col-md-6) 时，使屏幕上的文本和图像元素共享页面的宽度，或者应用 margin-bottom一定数量的

标签（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;
  }
}