昨天介紹了多重背景的用法，
今天想挑戰一樣的畫面，用不同的方法做出來。

切版沒有絕對的對跟錯，只有適合什麼情境或是在什麼條件下相比起來比較好，多嘗試練習才能發掘新的可能

本篇關鍵字

• position
• ::before, ::after
• border

範例檔

範例圖片跟 HTML 我就不放上來了，跟昨天的一樣。
CSS

.banner {
  width: 100%;
  height: 600px;
  background: url('https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1342&q=80')no-repeat center top/cover;
  position: relative;
}

.banner h2 {
  color: white;
  font-size: 50px;
  position: absolute;
  left: 40px;
  bottom: 20px;
}

.banner::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-width: 0 900px 240px 0;
  border-style: solid;
  border-color: transparent transparent rgba(177, 120, 68, .6) transparent;
}

.banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-width: 0 0 570px 570px;
  border-style: solid;
  border-color: transparent transparent rgba(177, 120, 68, .6) transparent;
}

喪屍分解

• 利用 ::before, ::after 來製作裝飾性用途的內容，搭配 position 將物件定位於畫面中。

• 此次使用的 border CSS

  border-width: /* top right bottom left */
  border-style: /* top right bottom left */
  border-color: /* top right bottom left */
  /* 常見簡寫 */
  border: /* border-width border-style border-color */
  

• border 若是只有設定單一值，表示上右下左皆是相同設定

• 利用一個空 div 來做三角形的範例

  div {
    position: relative;
  }
  
  div::after {
    content:'';
    position: absolute;
    border-width: 10px 20px 10px 20px;
    border-style: solid;
    border-color: black blue red green;
  }
  

  RESULT
  

  codepen

• border 只要再搭配 transparent 使用，便能製作出所需的三角形

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是不規則邊緣。