Eğimli ve birbiri ardına devam eden iki farklı çizgi deseni oluşturmak için kullanılabilecek CSS alternatifidir.
style.css
.cizgi {
background: repeating-linear-gradient(
-30deg,
#eaeaea,
#eaeaea 10px,
#eee 10px,
#eee 20px
);
}
style.css (Açıklamalı)
.cizgi {
background: repeating-linear-gradient(
/*--------------------------------------------------
Eğimi belirle.
--------------------------------------------------*/
-30deg,
/* Birinci Renk Grubu */
/*--------------------------------------------------
Çubuğun başlangıçta (0px) hangi
renkle başladığını belirle.
--------------------------------------------------*/
#eaeaea,
/*--------------------------------------------------
Çubuğun (istenilen genişlik değerine ulaştığında)
hangi renkte olması gerektiğini belirt.
--------------------------------------------------*/
#eaeaea 10px,
/* İkinci Renk Grubu */
#eee 10px,
#eee 20px
);
}
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>CSS - Tekrar Eden Eğimli Çizgi Üret</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cizgi">
Ali ata bak.<br>
Emel eve gel.<br>
Işık ılık süt iç.<br>
Koş Ali koş.<br>
Bugün hava çok güzel.<br>
Uykum geldi.<br>
Uykum kaçtı.<br>
</div>
</body>
</html>
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir