CSS3: linear-gradient chéo góc

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lự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àu1mà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àu1mà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àu1mà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àu1mà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>

» Tiếp: linear-gradient tuỳ chỉnh
« Trước: linear-gradient thẳng góc
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!