CSS Var and CalC (Branch 8642) (Copy 8649) (Copy 8..
✨ นายกันตภณ นิธิเสริมวงศ์
<html> <head> <title>Let's Start </title> <style> body{ background:#eee; margin:1em; font-family:sans-serif; } div{ width:100px; height:100px; border-radius:100%; display:inline-block; background:hsl(var(--h),100%,var(--l)); } </style> </head> <body> <section style="--h:270"> <div style="--l:10%"></div> <div style="--l:20%"></div> <div style="--l:30%"></div> <div style="--l:40%"></div> <div style="--l:50%"></div> <div style="--l:60%"></div> <div style="--l:70%"></div> <div style="--l:80%"></div> <div style="--l:90%"></div> <div style="--l:100%"></div> </section> <section style="--h:240"> <div style="--l:10%"></div> <div style="--l:20%"></div> <div style="--l:30%"></div> <div style="--l:40%"></div> <div style="--l:50%"></div> <div style="--l:60%"></div> <div style="--l:70%"></div> <div style="--l:80%"></div> <div style="--l:90%"></div> <div style="--l:100%"></div> </section> <section style="--h:210"> <div style="--l:10%"></div> <div style="--l:20%"></div> <div style="--l:30%"></div> <div style="--l:40%"></div> <div style="--l:50%"></div> <div style="--l:60%"></div> <div style="--l:70%"></div> <div style="--l:80%"></div> <div style="--l:90%"></div> <div style="--l:100%"></div> </section> </body> </html>