css3實現平行四邊形程式碼例項
分享一段程式碼例項,他利用css3實現了平行四邊形效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { margin: 30px; padding: 10px 20px; background: #ff8080; text-align: center; color: #fff; transform: skewX(-30deg); } .box span { display: block; transform: skewX(30deg); } </style> </head> <body> <div class="box"> <span>螞蟻部落</span> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
transform: skewX()可以參閱transform:skew()一章節。
相關文章
- CSS3實現的平行四邊形程式碼例項CSSS3
- CSS3繪製平行四邊形程式碼例項CSSS3
- canvas實現的多邊形程式碼例項Canvas
- css3鋸齒形邊框效果程式碼例項CSSS3
- css3實現的多重邊框程式碼例項CSSS3
- 用CSS實現三角形和平行四邊形CSS
- 用 CSS 實現三角形與平行四邊形CSS
- 強大的CSS:實現平行四邊形佈局效果CSS
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css六邊形效果程式碼例項CSS
- css3橢圓形程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- css3邊框顏色漸變且四角有內凹圓形程式碼例項CSSS3
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- CSS 平行四邊形導航選單CSS
- CSS3梯形效果程式碼例項CSSS3
- css3實現tab選項卡程式碼例項CSSS3
- css實現半透明邊框程式碼例項CSS
- css3螞蟻線邊框程式碼例項CSSS3
- css3實現的折角效果程式碼例項CSSS3
- css3實現的三角形對插效果程式碼例項CSSS3
- CSS3實現的環形旋轉載入補全效果程式碼例項CSSS3
- css3 動態條紋邊框程式碼例項CSSS3
- html5利用canvas圓形和多邊形程式碼例項HTMLCanvas
- css3繪製心形圖案程式碼例項CSSS3
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的進度條程式碼例項CSSS3
- CSS3實現的梯形圖案程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3實現的太極圖程式碼例項CSSS3
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- canvas實現的動態心形效果程式碼例項Canvas