僞元素CSS彩帶

首先由h1標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。

加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。

最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的span請加上類別class="ribbon-content"。

【檢視範例】【下載範例】

相關課程 : 精修DIV+CSS網頁排版設計輕鬆做