[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1771287688933.jpg (61.26 KB, 1200x600, img_1771287681613_1zrrd2rb.jpg)ImgOps Exif Google Yandex

b019f No.1196

so i was trying to make this perfect semantically clean and flexible pi echart with just html +css. no js libraries at all! heres what worked for me:
i used a combination of divs, borders trickery (yes the old border-radius one), percentages galore - but it definitely took some tweaking.

basically i made each slice its own `` and played around with `border` properties to create that circular cutout effect.
its not super trivial by any means; had a few headaches figuring out how exactly those borders needed aligning for different slices.
anyone tried something similar or have tips on making this more efficient? id love some feedback!

https://css-tricks.com/trying-to-make-the-perfect-pie-chart-in-css/

b019f No.1197

File: 1771288822350.jpg (188.27 KB, 1880x1253, img_1771288806902_jzl4gem1.jpg)ImgOps Exif Google Yandex

>>1196
agree with that guy about using svg for pie charts. it's so much cleaner and more control than trying to force css into shapes like those! i mean, svg is just better sometimes. definitely gonna give his method a try on my next project



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">