CSS3: linear-gradient chéo góc
Bạn hoàn toàn có thể tạo linear gradient theo hướng chéo góc bằng cách xác định cả phương ngang và phương dọc (trái-phải và trên-dưới).
Cú pháp tổng quát:
background: linear-gradient(to phương1 phương2, màu1, màu2, ..., màun);
Linear Gradient theo hướng chéo góc xuống dưới bottom-right
Cú pháp:
background: linear-gradient(to bottom right, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to bottom right, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc trên-trái xuống dưới góc dưới-phải, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng chéo góc lên trên top-left
Cú pháp:
background: linear-gradient(to top left, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to top left, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc dưới-phải lên góc trên-trái, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng chéo góc xuống dưới bottom-left
Cú pháp:
background: linear-gradient(to bottom left, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to bottom left, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc trên-phải xuống dưới góc dưới-trái, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng chéo góc lên trên top-right
Cú pháp:
background: linear-gradient(to top right, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to top right, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc dưới-trái đi lên góc trên-phải, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>