CSS3 矩形切角效果
分享一段程式碼例項,它利用css3實現了矩形切角效果。
在矩形的右下角有一個類似於切去的一角效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ padding: 1em 1.2em; max-width: 12em; color: white; background: #58a; background: linear-gradient(-45deg, transparent 15px, #58a 0); } </style> </head> <body> <div>螞蟻部落</div> </body> </html>
程式碼非常的簡單,只要對線性漸變有良好的理解即可。
相關閱讀:
(1).linear-gradient參閱CSS3 linear-gradient()線性漸變一章節。
(2).線性漸變角度參閱CSS3 傾斜角度線性漸變一章節。
相關文章
- css3實現的矩形切角效果CSSS3
- css3實現的矩形圓角切角效果CSSS3
- css實現矩形切角效果程式碼例項CSS
- CSS3矩形左右擺動效果CSSS3
- css切角效果程式碼例項CSS
- canvas矩形拖拽效果Canvas
- css3實現底部帶有箭頭的圓角矩形效果CSSS3
- CSS3 矩形一側三角形箭頭效果CSSS3
- svg生成矩形效果程式碼SVG
- canvas透明度的矩形效果Canvas
- canvas具有漸變效果的矩形Canvas
- css帶有空心箭頭矩形效果CSS
- svg實現矩形水平運動動畫效果SVG動畫
- svg矩形圍繞自身中心旋轉效果SVG
- CSS3象棋效果CSSS3
- CSS3 文字效果CSSS3
- CSS3空心圓效果CSSS3
- CSS3呼吸燈效果CSSS3
- CSS3哭臉效果CSSS3
- CSS3翻轉效果CSSS3
- CSS3動畫效果下拉導航選單效果CSSS3動畫
- CSS3圓環效果程式碼CSSS3
- CSS3箭靶效果程式碼CSSS3
- CSS3花屏文字效果CSSS3
- CSS3時間軸效果CSSS3
- CSS3白鶴展翅效果CSSS3
- CSS3 checkbox美化效果CSSS3
- CSS3動畫按鈕效果CSSS3動畫
- CSS3 旋轉魔方效果CSSS3
- css3實現翻牌效果CSSS3
- CSS3圓角表格效果CSSS3
- css3的半透明效果CSSS3
- CSS3 Loading效果CSSS3
- css空心三角形箭頭矩形效果CSS
- CSS帶有三角小箭頭的矩形效果CSS
- canvas繪製旋轉一定角度的矩形效果Canvas
- CSS矩形一側三角形箭頭效果CSS
- 滑鼠懸浮可以實現圓角矩形明亮變化效果