css3實現的矩形切角效果
分享一段程式碼例項,它實現了矩形四邊切角效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .notching{ position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); width: 160px; padding: 60px 20px; text-align: center; color: white; font-size: 200%; } .notching{ background: linear-gradient(135deg, transparent 15px, deeppink 0) top left, linear-gradient(-135deg, transparent 15px, deeppink 0) top right, linear-gradient(-45deg, transparent 15px, deeppink 0) bottom right, linear-gradient(45deg, transparent 15px, deeppink 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } </style> </head> <body> <div class="notching"></div> </body> </html>
相關文章
- css3實現的矩形圓角切角效果CSSS3
- CSS3 矩形切角效果CSSS3
- css實現矩形切角效果程式碼例項CSS
- css3實現底部帶有箭頭的圓角矩形效果CSSS3
- CSS3矩形左右擺動效果CSSS3
- svg實現矩形水平運動動畫效果SVG動畫
- css3實現翻牌效果CSSS3
- css切角效果程式碼例項CSS
- css3實現的簡單動畫效果CSSS3動畫
- css3實現的紅心跳動效果CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- css3實現動畫閃爍效果CSSS3動畫
- css3實現元素垂直居中效果CSSS3
- CSS3實現多種背景效果CSSS3
- css3實現的立體滾動效果CSSS3
- js和css3實現的空調效果JSCSSS3
- css3和js實現的大白動畫效果CSSS3JS動畫
- css3和javascript實現的時鐘效果CSSS3JavaScript
- CSS3實現多樣的邊框效果CSSS3
- CSS3實現的多重背景效果程式碼CSSS3
- CSS3實現的頁面反轉效果CSSS3
- css3實現的立方體旋轉效果CSSS3
- css3實現的相機鏡頭效果CSSS3
- css3實現的滾動的檯球效果CSSS3
- 滑鼠懸浮可以實現圓角矩形明亮變化效果
- CSS3實現王者匹配時的粒子動畫效果CSSS3動畫
- css3實現的折角效果程式碼例項CSSS3
- jQuery和css3實現的電子錶效果jQueryCSSS3
- js和css3實現的扇子展開效果JSCSSS3
- 純CSS3屬性animation實現的打字效果CSSS3
- CSS3 實現兩端擺動的小球效果CSSS3
- css3實現的文字無法選中效果CSSS3
- CSS3實現的3D旋轉效果CSSS33D
- CSS3實現的圓球放大縮小效果CSSS3
- CSS3實現的頁面載入等待效果CSSS3
- css3實現的旋轉載入等待效果CSSS3
- CSS3實現3D魔方效果CSSS33D
- CSS3實現原型進度條效果CSSS3原型