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

個人簡介

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

主目錄

與歌謠一起通關前端面試題

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。