CSS 筆記 - 金魚系列 20 - 不規則邊緣

這次練習是在 HTML 架構下沒有加任何標籤，但要做到區塊間不規則的圖案。

學習重點

• CSS absolute 絕對定位
• CSS relative 相對定位
• Flex
• 偽元素
• transform: translate() 位移運用
• box-shadow 應用

HTML 架構

• 需要一張 banner 圖片。
• 並且下方接一個文字區域，該區域內分為左右兩欄。

<div class="banner">
  <div class="logo"><i class="fas fa-plane-departure"></i>NICEPLANE</div>
  <div class="slogan">
    <h1>What Wonderful Holiday</h1>
    <br />
    <p class="slogan">Your Whole World In Your Hands</p>
  </div>
</div>
<div class="section">
  <div class="container">
    <div class="item">
      <h2>金魚系列 XX (羅馬字 20)</h2>
      <p>
        交通簡介眼睛，打了各項爸爸，沒有加入時間重大球隊健康不願病毒我覺得詳細取得，瀏覽次數業主研發拒絶這裡標誌最好的，改變性別報告，把握英雄，權威文檔相當把它筆記本這段平時供求報名相信不能，回覆女友滑鼠反對節省對待至今內容簡介結果財產上漲檔案焦點，在我另一，新。
      </p>
      <p>
        雖然通用主席什麼是難得評價包含主營不出辛苦，書庫權利造成暴力網頁班加速幾乎見到條款漸漸把它操作系統，學科市委要有，少女國語身份魯蛇窗口道德傳說辦公室製作推薦公司舉行一口關於，不必民族交給原則二手讓你改變三人語文患者裡面依舊近年來也有，都不交流是不是一系列，大盤崗位一款只好人家昨日勞動一半只有參加南方，姐姐構成一路感興趣結婚絶不始終出租漸漸億元語言語文是以規律，傢伙個人警察，採購不得破解達到，這時。
      </p>
    </div>
    <div class="item">
      <h2>不規則邊緣切版</h2>
      <p>
        很快版面充分先進好多技術這麼多不肯解壓密碼像素刪除，效果土地，以往倒是連續眼光難得列表進去新鮮有效天空資格搜尋更新建材充滿，我還各級說明本報希望無人提前的話委託發現，害怕眼神果然電力對了植物早已的是外觀觀眾健康抽菸區關西北方，美容指數，電池地區只需，去年。
      </p>
      <p>
        頻道爆炸上去貸款你好精美主演著名，便是眾人小子家族加盟緊張職務魔法熱線最佳補充，但我一場靈魂期待，流程首頁網易，和平島一部分只不過用於透露開發商貸款不僅四個求購，首頁本次鼓勵我來重點，怎麼辦輕鬆主流未來，主體故障幹什麼，積極員工中心你好出發網路，地理論壇。
      </p>
    </div>
  </div>
</div>

架構與樣式初步設定後會變下方這樣：

來到重點

使用 box-shadow 來做成不規則邊緣效果。

• 使用 .section 區塊做一個偽元素，並使其對齊 .section 正中央，使用 transform:translateY()，往上 50% 做位移。

.section {
  background-color: #eeeeee;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    transform: translateY(-50%);
  }
}

就會得到下圖結果：

box-shadow 的特性

使用 box-shadow 的特性來達到遮罩與不規則的效果。

box-shadow: X軸位移| Y軸位移| 模糊值|擴散值|大小|顏色

剛剛已經做了一個實體圓形，透過陰影的特性，X 軸向右依序向右推 100px，並且不要模糊，不要擴散，不要改變原尺寸大小，顏色改成橘色，

box-shadow: 100px 0 0 0 orange, 200px 0 0 0 orange, 300px 0 0 0 orange;

就會變成下圖：

確認後，就把顏色改成與 .section　顏色相同即可，再依照自己喜歡的位置與組成的大小就可以排成喜歡的樣式，不同邊就把 X 軸改為負值，就會變對稱顯示，如果想多一點層次，讓偽元素底下的陰影在加一層陰影，只要再多下一層不同顏色與位置的陰影即可。

如下方樣式：

 box-shadow:
 //右側陰影區塊
 70px 10px 0 -5px #eeeeee,
             150px -5px 0 3px #eeeeee,
             250px 0 0 10px #eeeeee,
             300px -10px 0 5px #eeeeee,
             350px -20px 0 -3px #eeeeee,
             450px 0 0 10px #eeeeee,
             540px 10px 0 -5px #eeeeee,
             620px -5px 0 3px #eeeeee,
             700px 0 0 10px #eeeeee,
             780px -10px 0 5px #eeeeee,
             860px -20px 0 -3px #eeeeee,
             950px 0 0 10px #eeeeee,
//左側陰影區塊
             -70px 10px 0 -5px #eeeeee,
             -150px -5px 0 3px #eeeeee,
             -250px 0 0 10px #eeeeee,
             -300px -10px 0 5px #eeeeee,
             -350px -20px 0 -3px #eeeeee,
             -450px 0 0 10px #eeeeee,
             -540px 10px 0 -5px #eeeeee,
             -620px -5px 0 3px #eeeeee,
             -700px 0 0 10px #eeeeee,
             -780px -10px 0 5px #eeeeee,
             -860px -20px 0 -3px #eeeeee,
             -950px 0 0 10px #eeeeee,
//底下模糊黑色陰影區塊
              70px 10px 5px -5px #333,
              150px -5px 5px 3px #333,
              250px 0 5px 10px #333,
              300px -10px 5px 5px #333,
              350px -20px 5px -3px #333,
              450px 0 5px 10px #333,
              540px 10px 5px -5px #333,
              620px -5px 5px 3px #333,
              700px 0 5px 10px #333,
              780px -10px 5px 5px #333,
              860px -20px 5px -3px #333,
              950px 0 5px 10px #333,
              -70px 10px 5px -5px #333,
              -150px -5px 5px 3px #333,
              -250px 0 5px 10px #333,
              -300px -10px 5px 5px #333,
              -700px 0 5px 10px #333,
              -780px -10px 5px 5px #333,
              -860px -20px 5px -3px #333,
              -950px 0 5px 10px #333;
  }

得到結果會這樣…

我只要保留上方不規則邊緣，所以 .section 最上方用一塊色塊蓋掉，使用 ::before 製作，最後調整 色塊與文字的階層位置就完成了!

.section::before {
    //色塊區域
    content: "";
    width: 100%;
    height: 100px;
    background-color: #eee;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative; //純粹改變接層，所以不做任何位移
    z-index: 2;

Codepen https://codepen.io/hnzxewqw/full/xxZvwEV

結語

滿有趣的切版，但有點耗時，好處是可以對應 RWD 的效果，也練習到偽元素與 box-shadow 的特性。

參考資料

• 金魚都能懂的這個網頁畫面怎麼切 : 不規則邊緣