[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%;
       }

个人简介

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

主目录

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