介绍
直到几年前，如果您想要网站的背景形状或部分不是矩形，您很可能需要设计师为您提供静态 PNG 或 JPEG 图像，并根据需要添加，但 CSS 已经从那时起，我的朋友们已经走了很长的路。
当我进行网站更新时，将页面上的内容分解为不同颜色的背景部分，在纯白色和柔和的灰色之间交替，我的设计模型包含了一个底部边缘向上倾斜的部分，右侧而不是像典型的块元素那样以完美的 90 度角穿过页面。
现在我可以要求设计师制作一张背景图片来为我完成这件事，但我想看看我是否可以利用 CSS 的力量自己完成这件事。你瞧，我可以使用 CSS 剪辑路径。
DOM 中有趣的形状和视觉效果不再纯粹是设计师的领域，借助 CSS Clip-path 等工具，开发人员有能力重塑元素，我将向您展示如何操作。
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() 剪辑路径与 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
<div class="about-body">
<!-- more HTML elements up here -->
<section class="puzzle-section section">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<h4 class="mb-3">
Lorem ipsum dolor
</h4>
<p class="mb-5">
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.
</p>
<h4 class="mb-3">
Duis aute irure dolor in reprehenderit
</h4>
<p class="mb-5">
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.
</p>
</div>
<div
class="col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-6 offset-lg-0"
>
<img
class="img-fluid"
src="/images/about/puzzle-pieces.png"
alt="Puzzle pieces"
/>
</div>
</div>
</div>
</section>
<!-- more HTML elements below -->
</div>
登录后复制
This section of code is relatively compact, but it deserves discussion. In addition to the HTML elements, there are quite a few CSS classes which come from the Bootstrap library, one of the original open source CSS frameworks for responsive web designs.
Among the custom classes like about-body, which I used for adding custom styling, there are classes like container, row, col-12 or col-md-6, mb-5, and mb-3.
All of the latter classes are Bootstrap classes, which serve to make the text and image elements onscreen share the width of the page when the viewport is over a certain width (col-md-6), or apply a margin-bottom of a certain amount to the
tags (mb-3 or mb-5).
The Bootstrap classes are beside the point for this post though, the class to focus on is the puzzle-section which wraps all the text and puzzle piece image.
This puzzle-section class is where we're going to add the clip-path property to display the light grey background behind the text and image with the slightly tilted, up-and-to-the-right design.
Add the CSS clip-path to shape puzzle-section
As I wasn't quite sure how to style a normal, rectangular
into an uneven shape, I started looking for a solution online and found this helpful, interactive clip-path-focused site, CSS clip-path maker.
This CSS clip-path maker website is fantastic because it has a whole slew of preset shapes, adjustable image sizes and backgrounds, and the currently displayed image's vertices can be dragged into any arrangement you want. The line at the bottom of the screen shows the exact clip-path CSS values that you can copy/paste into your own project's CSS.
I chose the parallelogram preset shape as my starting point, and then dragged the corners to match the angle of the background section I was trying to recreate from scratch. Once I was satisfied it looked accurate, I copied the CSS line at the bottom of the page to my clipboard.
In my project's SCSS file, I added the copied clip-path CSS in addition to the light grey background-color property and some padding to give the text and puzzle piece images some breathing room on the page.
NOTE: Even though this file shown in the example code is SCSS instead of pure CSS, for this post it shouldn't make a difference here. It should be a direct 1:1 comparison.
about.scss
.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;
}
}
登录后复制
That little bit of CSS for clip-path was all that was needed to take my perfectly rectangular DOM element and turn it into an imperfect polygon instead. Not too shabby!
Conclusion
CSS is pushing the boundaries of what web developers can do without resorting to images, videos, and custom designed elements all the time. And the satisfaction of figuring out how to do a cool little bit of design on all on your own feels pretty empowering.
A recent example of this was using the CSS clip-path property to create a background box for some text and images that had an uneven bottom edge. With the help of an interactive website dedicated decoding to clip-paths of all shapes and sizes, I was able to make quick work of this slightly skewed polygon.
And let me take a moment to shout out how much I appreciate the folks putting out those little sites or code snippets that solve a very specific problem for another developer - you folks continue to make the Internet a better place.
Check back in a few weeks — I’ll be writing more about JavaScript, React, IoT, or something else related to web development.
If you’d like to make sure you never miss an article I write, sign up for my newsletter here: https://paigeniedringhaus.substack.com
Thanks for reading. I hope learning to reshape how elements look in the DOM with just the power of CSS helps you as much as it's helped me.
Further References & Resources
- MDN docs, CSS clip-path
- CSS clip-path generator website
以上是依靠 CSS Clip Path 在 DOM 中制作很酷的形状而无需图像的详细内容。更多信息请关注PHP中文网其他相关文章！
