介紹
直到幾年前，如果您想要網站的背景形狀或部分不是矩形，您很可能需要設計師為您提供靜態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中文網其他相關文章！
