一、Css 斜線,塊斜線,對角線
塊的寬度高度任意支援
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 1 */ .block { height: 100px; border: 1px solid red; position: relative; overflow: hidden; } .block::before { content: ''; position: absolute; width: 0; height: 0; left: 0px; top: 0; width: 100%; height: 100%; background: linear-gradient(to right top, #00f 50%, #fff 50%); } .block::after { content: ''; position: absolute; width: 0; height: 0; left: -1px; top: 1px; width: 100%; height: 100%; background: linear-gradient(to right top, #fff 50%, transparent 50%); } </style> </head> <body> <div class="block"></div> </body> </html>
二、Css 斜線對角線,正方形對角線推薦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 2 */ .block2 { height: 100px; width: 100px; position: relative; overflow: hidden; background: yellow; margin: 50px auto; } /* 2.1 */ .block2::after { content: ''; position: absolute; left: 50%; top: 50%; height: 150px; width: 1px; background: #888888; transform: translate(-50%, -50%) rotate(-45deg); } </style> </head> <body> <div class="block2"></div> </body> </html>
三、css 對角線,漸變實現,粗細度不好控制,寬高不能太大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 3 */ .block3 { box-sizing: border-box; background: yellowgreen; width: 200px; text-align: center; margin: auto; padding: 100px 0px; position: relative; } .block3::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right top, transparent 49%, #000, transparent 50%); } </style> </head> <body> <div class="block3"> 張三丰的店 </div> </body> </html>
更多:
Css 修改圖示顏色_Css 修改圖片顏色_Css控制圖片顏色
CSS3 filter(濾鏡) 屬性使用整理
Css3 將網頁變成黑白_Css3 網頁黑白濾鏡filter