ทำซ้ำ Linear Gradients ด้วย CSS

เพื่อทำซ้ำ Linear Gradients ให้ใช้ฟังก์ชัน repeating-linear-gradient()

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อทดสอบ:

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 100px;
      background: repeating-linear-gradient(red, yellow 30%, green 30%);
    }
  </style>
</head>
<body>
  <h2>Linear Gradient</h2>
  <div id="demo">Repeating Linear Gradients</div><br>
</body>
</html>

คำอธิบาย: repeating-linear-gradient(red, yellow 30%, green 30%) สร้างรูปแบบซ้ำ: แดง → เหลือง (จบ 30%) → เขียว (เริ่ม 30%) → แดง → เหลือง → เขียว... ซ้ำเรื่อยๆ จนเต็มกล่อง สร้างเอฟเฟกต์ลายเส้น (stripes) ได้ง่าย