使用3d緞帶形狀的標籤是常見的乙個設計模式，用在商品折扣、文章標題或**推薦資訊上，
來突出顯示重點內容，吸引使用者視覺焦點。實現的方法有2種，一種是使用背景，一種是使用三角形的css3偽元素。
本文介紹第2種方法，使用乙個最簡化的例項來講解如何實現這個效果：
上面的介面是一張簡化的商品卡片，包含標籤和商品描述，我們使用h2元素來容納標籤，html**如下：
get an additional 50% off sale items for a limited time.
現在頁面看起來像上面這樣，接下來就是要給標籤（h2元素）新增樣式，乙個是背景色，乙個是左邊的3d摺紙效果。
摺邊效果其實就是給h2的左下角拼接乙個三角形的元素，我們使用偽元素來實現，**如下：
.fancy h2
.fancy h2:after
.fancy h2:after
.fancy h2 .ribbon-center
h2:after偽元素是乙個常用的三角形定義（寬高為0的元素加上border調整可以實現各種三角形形狀），這樣就可以了。
如何使用CSS3實現乙個3D相簿
css3系列我已經寫過兩篇文章了，在這貼出鏈結，感興趣的同學可以看一下css3初體驗之奇技淫巧，css3 3d立方體效果 transform也不過如此 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。本文再來利...
使用CSS3實現乙個3D相簿
css3系列我已經寫過兩篇文章，感興趣的同學可以先看一下 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。本文再來利用css3屬性來編寫乙個例項，話不多說，先直接看看效果。因為前面已經講解過一些屬性的用法，此篇...
CSS3實現3D立體效果
css3實現3d效果 1.涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移 translate 縮放 scale 拉伸 skew 旋轉 rotate 這裡涉及到3d轉換的主要介紹旋轉。下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。...