[css] 用css实现饼图效果

方法一、使用伪元素 + transform + css渐变实现.pie {width: 100px;height: 100px;border-radius: 50%;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);}.pie::before {content: '';display: block;margin-left: 50%;height: 100%;border-radius: 0 100% 100% 0 / 50%;background-color: inherit;transform-origin: left;transform: rotate(.3turn);}方法二、svg解决方案<svg width="100" height="100"><circle r="25" cx="50" cy="50"/></svg>circle {fill: yellowgreen;stroke: #655;stroke-width: 50;stroke-dasharray: 60 158;}svg {transform: rotate(-90deg);background: yellowgreen;border-radius: 50%;}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题