- Based on: https://codepen.io/xgh/pen/ExaXgbb
- Multiplecss_transforms, apply scale and rotate.
- css_mixin, dynamic class name.
@mixin createCircle($w, $h, $suffix) {
.semi-circle-#{$suffix} {
}
}How to rotate along y axis?
Ans. transform: scaleY(-1)
Zoom out CSS?
Ans. transform: scale(0.9)
overflow: hidden to avoid moving mask boxes to other container?
- radial_gradient
- conic_gradient
background:
// change left to top to have rounded corners at both sides radial-gradient(farthest-side,var(—c) 98%,#0000) left/var(—b) var(—b) no-repeat,
conic-gradient(var(—c) calc(var(—p)*1%),#0000 0);
#### Links
- https://web.archive.org/web/20140829071149/http://9elements.com/html5demos/matrix3d/
- https://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css
- https://www.freecodecamp.org/news/css-only-pie-chart/
- https://codepen.io/t_afif/pen/XWaPXZO