---
# System prepended metadata

title: "\U0001F3C5 Day 34 - 偽元素運用（第六週首頁卡片折角）"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 34 - 偽元素運用（第六週首頁卡片折角）

今天我們要練習的是偽元素實戰運用，以第六週首頁的卡片折角為例，如下圖
![image](https://hackmd.io/_uploads/BJRgNtCVee.png)

在遇到類似的小區塊特殊樣式時，就很適合使用偽元素來處理，省去多餘標籤的使用，讓整體結構更簡化。
另外分享一個好用的 [CSS 三角形生成器](http://tool.uis.cc/sjmaker/)，可用於快速生成指定形狀與樣式的三角形樣式，使用方式可參考下圖
![image](https://hackmd.io/_uploads/SJxKHK04lg.png)

### 題目
使用此 [CodePen 模板](https://codepen.io/fhljksmg-the-styleful/pen/ByNbMjN?editors=1100)，試著設定 CSS 區塊底部 `.horn:after` 偽元素的樣式，讓折角正確呈現在卡片右下方。


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/EajMGJb?editors=1100
 -->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  01  |  Nooooora | [Codepen](https://codepen.io/Nora-Ch/pen/JoYEWeQ?editors=1100) |
|  02  |  jchunnn |[Codepen](https://codepen.io/jchunnn/pen/JoYEWMV)|
|  03  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/Qwjdpza) |
|  04  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/OPyWpEW) |
|  05  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/VYvPbej) |
|  06  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/XJmpgJK) |
|  07  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/jEbywWN?editors=0110) |
|  08  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/dPYNRmj) |
|  09  |  suemma  |[Codepen](https://codepen.io/suemma/pen/NPGdgmx?editors=1100) |
|  10  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/PwPWKOz?editors=1100) |
|  11  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/ogjBGmW?editors=1100) |
|  12  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/qEORpdJ) |
|  13  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/wBKgpoW?editors=1100) |
|  14  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/JoYEMzg?editors=1100) |
|  15  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/ZYbLrzm) |
|  16  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/LEpxQmb) | -->
|  17  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/dPYNdgW) |
|  18  |  7lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/qEORYqL) |
|  19  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/OPyWqMa) |
|  20  |  water | [Codepen](https://codepen.io/wateruby/pen/jEbyjdW)|
|  21  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/QwjpGEm) |
|  22  |  Chris Wang  |[Codepen](https://codepen.io/fhljksmg-the-styleful/pen/EajMGJb) |
|  23  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/NPGjPXN) |
|  24  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/yyYXPvr?editors=1000) |
|  25  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=wBKemPj) | 
|  26  |  Min  |[Codepen](https://hackmd.io/B9cV1PHMTemXOoUpVBRNBQ) | 
|  27  |  Hao  |[Codepen](https://codepen.io/Howell/pen/VYvMRjo) |
|  28  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/wBKmvzL?editors=1100) |
|  29  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/JoYmBdx) |
|  30  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/EaVrKyP) |
|  31  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/EaVqPgN) |
|  32  |  NGNLzenos  |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/LEGGrXZ?editors=1100) |
|  33  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/emZOEJW?editors=1100) |
<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->