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

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

最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的

藝文

創作

文化生活

<div class="draft-block draft--p left">首先由&lt;h1&gt;標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:905px" class="image-block-prerender" data-src="https://images.vocus.cc/e6aa1295-5085-4537-be68-3f2863ba2057.jpg" data-width="905" data-height="671" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:731px" class="image-block-prerender" data-src="https://images.vocus.cc/81a1b5f0-3f11-42a4-93c7-3162ef740235.jpg" data-width="731" data-height="753" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的&lt;span&gt;請加上類別class="ribbon-content"。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1036px" class="image-block-prerender" data-src="https://images.vocus.cc/6bf0a329-7d6d-4ab9-a7a4-0f99aefb5cf4.png" data-width="1036" data-height="845" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:1090px" class="image-block-prerender" data-src="https://images.vocus.cc/332fc140-b32c-4756-a0f3-ba6bf8017c08.png" data-width="1090" data-height="186" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">【<a href="https://d32mcm3hkdm8smd1hmeyyq-on.drv.tw/CSS/css09/css09-ok.html" target="_blank" class="draft--a">檢視範例</a>】【<a href="https://drive.google.com/open?id=1BeTYV8AC-dRNiq-ccwpd3WMQ1HoENlkv" target="_blank" class="draft--a">下載範例</a>】</div>
<div class="draft-block draft--p left">相關課程 : <a href="https://www.uuu.com.tw/Course/Show/687/%E7%B2%BE%E4%BF%AEDIV-CSS%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E8%A8%AD%E8%A8%88%E8%BC%95%E9%AC%86%E5%81%9A" target="_blank" class="draft--a">精修DIV+CSS網頁排版設計輕鬆做</a></div>

<p>首先由&lt;h1&gt;標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。</p>
<p><br></p>
<p>加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。</p>
<p><br></p>
<p>最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的&lt;span&gt;請加上類別class="ribbon-content"。</p>
<p><br></p>
<p><br></p>
<p>【<a href="https://d32mcm3hkdm8smd1hmeyyq-on.drv.tw/CSS/css09/css09-ok.html">檢視範例</a>】【<a href="https://drive.google.com/open?id=1BeTYV8AC-dRNiq-ccwpd3WMQ1HoENlkv">下載範例</a>】</p>
<p>相關課程 : <a href="https://www.uuu.com.tw/Course/Show/687/%E7%B2%BE%E4%BF%AEDIV-CSS%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E8%A8%AD%E8%A8%88%E8%BC%95%E9%AC%86%E5%81%9A">精修DIV+CSS網頁排版設計輕鬆做</a></p>

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

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

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

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

僞元素CSS彩帶

當跟 CSS 選取器匹配的元素底下的內容要做些特殊處理時，就可以利用偽元素來幫我們做到一些效果，如邊框與背景圖。其中【::before】 在元素之前插入某些內容與【::after】在元素之後插入某些內容，在進階 CSS 效果中算是很特別的，而且製作 RWD 頁面上效果時也常可以用到。
首先新增類別【

僞元素彩色多層邊框

首先請加入串聯該CSS檔:

接著套用類別型態的CSS即可:


若需要修改請至該CSS檔修改CSS屬性即可:

【檢視範例】【下載範例】
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做