1、html布局

2、css部分

.pie

position relative;

aspect(4.5rem)

border-radius 50%

overflow hidden

.slice

overflow hidden

position absolute

top 0

right 0

width 50%

height 50%

transform-origin 0% 100%

.slice-one

transform rotate(30deg) skewY(-30deg)

background black

.slice-two

transform rotate(-30deg) skewY(-30deg)

background yellow

.slice-three

transform rotate(-90deg) skewY(-30deg)

background black

.slice-four

transform rotate(-150deg) skewY(-30deg)

background yellow

.slice-five

transform rotate(-210deg) skewY(-30deg)

background black

.slice-six

transform rotate(-270deg) skewY(-30deg)

background yellow

3、效果圖

微信截圖_20200908094825.png

總結

以上是生活随笔為你收集整理的css3中实现摘取金币_用css3实现抽奖转盘里的扇形图的全部內容，希望文章能夠幫你解決所遇到的問題。

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