border-image-repeating-linear-gradient-slice-fill-2.html (505B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of border-image-source: linear-gradient with border-image-slice and fill</title> 5 <style> 6 div { 7 border: 30px solid black; 8 border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); 9 width: 180px; 10 height: 180px; 11 } 12 div.border1260 { 13 border-image-slice: 12 60 fill; 14 } 15 div.border6012 { 16 border-image-slice: 60 12 fill; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="border1260"></div> 22 <div class="border6012"></div> 23 </body> 24 </html>