CSS矩形對角斜線

admin發表於2018-08-11
CSS

分享一段程式碼例項，它利用背景線性漸變實現了矩形對角斜線效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  margin:50px auto;
  width:100px;
  height:100px;
  border:1px solid #333;  
  background:linear-gradient(45deg,transparent 49.5%,
                             deeppink 49.5%,
                             deeppink 50.5%,
                             transparent 50.5%);
}
</style> 
</head> 
<body> 
  <div></div>
</body> 
</html>

上面程式碼實現了預期效果，程式碼關鍵在於線性漸變，具體參閱相關閱讀。

相關閱讀：

（1）.線性漸變參閱CSS3 linear-gradient()線性漸變一章節。

（2）.傾斜線性漸變參閱CSS3 傾斜角度線性漸變一章節。

相關文章