網頁區塊不想都是長方形？臺北網頁設計常用的斜切、斜色帶、波浪分隔線 CSS

最後更新：2026/10/13

很多網站的首頁，是一個長方形接一個長方形往下排：一段白底、一段灰底、一段白底。內容沒問題，看起來卻像一份表格。只要把區塊和區塊之間的交界換個形狀，斜一點、彎一點，整個頁面就有了流動感，眼睛也會自然跟著往下看。

臺北網頁設計常見的做法有三種：斜切色塊、傾斜色帶、波浪邊。MIMI 的首頁三種都用了，下面把它們拆成最簡單的版本，一個一個說明。

不想自己改？把這篇交給 AI

把這篇的網址（或全文）連同下面這段話貼給 AI：

我的網站是 WordPress。我想照下面這篇文章，在首頁的區塊之間加上斜切、斜色帶或波浪形狀的分隔線。
請先問我：我用的佈景主題或頁面編輯器、我的品牌色、想放在哪幾個區塊之間。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）

改之前先備份，密碼不要貼給 AI。

斜切色塊：clip-path

第一種是把一整個區塊的上下邊切成斜的。用的是 CSS 的 clip-path，它像一把剪刀，只留下你指定的多邊形範圍：

/* 斜切色塊：上下兩邊都是斜的 */
.slant {
  background: #e8fbf1;
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
  padding: calc(5vw + 60px) 20px;
}

polygon() 裡的四個點，依序是左上、右上、右下、左下。左上往下移了 5vw，右下往上移了 5vw，上下兩條邊就斜了。用 vw（螢幕寬度的百分比）而不是固定的像素，斜度會跟著螢幕寬度變化：電腦上明顯，手機上變得比較平緩，不會切掉太多內容。

有兩件事要留意。被切掉的地方是透明的，會露出後面的背景，所以上下相鄰區塊的底色要搭配好。另外，裡面的文字也會一起被切，所以上下的留白要加上斜掉的那 5vw，MIMI 首頁的服務區就是這樣寫的，文字才不會被切到。

傾斜色帶：只歪背景，不歪文字

第二種是一條斜斜的色帶，上面的文字卻是正的。做法是用 ::before 畫一個背景，只讓這個背景傾斜：

/* 斜色帶：底色傾斜、字是正的 */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px 20px;
}
.band::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8vw;
  right: -8vw;
  top: 25%;
  bottom: 25%;
  background: #fff710;
  transform: skewY(-4deg);
}

skewY(-4deg) 讓色帶往一邊歪 4 度。色帶歪了以後，左右兩端會露出缺角，所以左右各往外多拉 8vw 把它補滿；外層的 overflow: hidden 把超出去的部分藏起來，手機上才不會出現可以左右滑動的空白。isolation: isolate 讓 z-index: -1 的色帶留在這個區塊裡面，不會跑到整個頁面的背景後面去。

想要更活潑，可以再加一條細細的色帶疊在下緣，換一個對比色，MIMI 首頁「適應任何時代」那一段就是黃色色帶下面再加一條粉紅色的線。

波浪邊：一條 SVG 曲線

第三種是彎曲的波浪。這種形狀用 CSS 寫很麻煩，用一小段 SVG 最簡單：

<section class="wave-box">
  <svg class="wave" viewBox="0 0 1440 70" preserveAspectRatio="none" aria-hidden="true">
    <path d="M0,0 H1440 V30 C1200,70 960,70 720,36 C480,2 240,2 0,40 Z" fill="#fff"/>
  </svg>
  區塊內容
</section>

.wave-box { position: relative; background: #1d1d1f; color: #fff; padding: 120px 20px 80px; }
.wave-box .wave { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; display: block; }

這條 SVG 是一塊白色的形狀，上緣是平的、下緣是波浪，疊在深色區塊的最上面，看起來就像深色區塊的上緣是彎的。fill 的顏色要和上一個區塊的底色一樣。preserveAspectRatio="none" 讓這條波浪不管螢幕多寬都拉滿；top: -1px 往上多蓋 1 像素，避免某些螢幕縮放比例下，交界出現一條細細的縫。

波浪的形狀可以自己調 path 裡的數字，或用網路上的分隔線產生器，選好形狀、顏色，直接複製 SVG 或 CSS 回來改。

放進 WordPress

CSS 放在「外觀 → 自訂 → 附加的 CSS」，區塊主題在網站編輯器的樣式設定裡也有加 CSS 的地方。在區塊編輯器裡選取一個「群組」區塊，到右側的「進階設定」填上 class 名稱（例如 slant），樣式就會套上去。波浪那段 SVG 要用「自訂 HTML」區塊貼上。

改完一定要用手機看一次。斜度、色帶的寬度、波浪的高度，在手機上常常需要調小一點，可以用 @media (max-width: 768px) 另外寫一組手機版的數值。

動態背景，用之前想三次

找分隔線靈感時，很容易一路看到各種會動的背景：飄浮的粒子、閃爍的星空、無限捲動的圖片。展示頁上看起來很厲害，放到商業網站上卻要很節制。這類效果大多用 JavaScript 一直重畫畫面，手機會發燙、耗電，舊一點的手機還會卡頓；背景一直在動，客人的注意力也從你的文字上被拉走。

如果真的想用，只放在首頁第一屏，動作慢一點、顏色淡一點，並且尊重使用者「減少動態效果」的系統設定（CSS 的 prefers-reduced-motion）。大部分時候，一條斜線、一道波浪，就已經足夠讓頁面活起來。

形狀要跟品牌說同一件事

斜線讓人覺得有速度、有活力，波浪讓人覺得柔和、親切，圓角讓人覺得好親近。選哪一種，看你的品牌想給人什麼感覺，流不流行是其次。

如果你想要一個不是套版、從版面到細節都照你的品牌設計的網站，可以先看〈IG 帳號不是你的資產〉，想想網站要做到什麼。MIMI 專做客製化網頁設計，版面、配色、動線都依你的內容設計。MIMI 提供臺北網頁設計服務，臺北的店家、品牌可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。