Fe-interview: [css] 第222天 用css实现饼图效果

[haizhilin2013]

第222天 用css实现饼图效果

我也要出题

[everast2015]

方法一、使用伪元素 + 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%;
       }

[cxyxiaoyuyu]

使用角向渐变 conic-gradient

.pie{
    width: 200px;
    height:200px;
    border-radius: 50%;
    background: conic-gradient(#2ecc7e 0 30%,#ABCDEF 30% 60%,pink 60% 100%);
 }