css梯形程式碼例項
下面是使用css繪製一個梯形的程式碼例項,需要的朋友可以做一下參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box { width: 200px; height: 200px; padding: 10px; margin: 10px 20px; } .tab { position: relative; padding: .5em 1em .35em; color: white; } .tab::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: perspective(.5em) rotateX(5deg); transform-origin: bottom; } </style> </head> <body> <div class="box tab">梯形</div> </body> </html>
相關文章
- css實現梯形程式碼例項CSS
- CSS3梯形效果程式碼例項CSSS3
- CSS3實現的梯形圖案程式碼例項CSSS3
- css切角效果程式碼例項CSS
- CSS 對聯程式碼例項CSS
- css分割線程式碼例項CSS線程
- css模糊效果程式碼例項CSS
- CSS RGBA 程式碼例項CSS
- 純css tab選項卡程式碼例項CSS
- CSS 隔行變色程式碼例項CSS
- CSS空心箭頭程式碼例項CSS
- CSS橢圓效果程式碼例項CSS
- CSS條紋背景程式碼例項CSS
- css元素位置固定程式碼例項CSS
- css立體效果程式碼例項CSS
- css取消滑鼠事件程式碼例項CSS事件
- css多重邊框程式碼例項CSS
- CSS3雪人程式碼例項CSSS3
- css Sprite 動畫效果程式碼例項CSS動畫
- css斜線效果程式碼例項CSS
- css 心形效果程式碼例項CSS
- css細線表格程式碼例項CSS
- CSS清除浮動程式碼例項CSS
- css背景虛化效果程式碼例項CSS
- CSS3卡通形象程式碼例項CSSS3
- css清除浮動程式碼例項演示CSS
- css水平垂直居中程式碼例項CSS
- css多欄佈局程式碼例項CSS
- css3 animation動畫程式碼例項CSSS3動畫
- css徑向漸變程式碼例項CSS
- jQuery css()函式使用程式碼例項jQueryCSS函式
- css彈性佈局程式碼例項CSS
- CSS文字模糊效果程式碼例項CSS
- css兩列等高程式碼例項CSS
- css圖片變黑白程式碼例項CSS
- css內邊框效果程式碼例項CSS
- css邊框陰影程式碼例項CSS
- css文章豎排效果程式碼例項CSS