[css] 用css實(shí)現(xiàn)餅圖效果

方法一、使用偽元素 + transform + css漸變實(shí)現(xiàn).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%;}

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 用css实现饼图效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。