CSS實現扇形和三角 記第一次寫部落格

看上去是不是無從下手，那就讓我來分析下

假設有如下html：

class="

sector
">
class="
inner
">

.sector 

.inner 

外面容器原本是個正方形，但通過clip剪裁只顯示右半部分；

子元素同樣尺寸，但通過clip剪裁只顯示左半部分。然後通過適當旋轉露出我們想要的扇形區域；

原理示意圖如下：

有了乙個扇形一整個轉盤還遠嗎？相信你也會了，但是我還是想給出我的成果(●ˇ∀ˇ●)

下面就是一整個轉盤的html結構(過於冗餘，摺疊)

1

class="
sector
">
2class="
inner
">34
class="
sector
">
5class="
inner
">67
class="
sector
">
8class="
inner
">910
class="
sector
">
11class="
inner
">
1213
class="
sector
">
14class="
inner
">
1516
class="
sector
">
17class="
inner
">
1819
class="
sector
">
20class="
inner
">
2122
class="
sector
">
23class="
inner
">
2425
class="
sector
">
26class="
inner
">
2728
class="
sector
">
29class="
inner
">
3031
class="
sector
">
32class="
inner
">
3334
class="
sector
">
35class="
inner
">
36

下面是轉盤樣式的css**，只需要給每個外部容器偏移個角度，錯開他們的位置

.sector:nth-of-type(1

)  .sector:nth-of-type(2
)   .sector:nth-of-type(3
)  .sector:nth-of-type(4
)  .sector:nth-of-type(5
)  .sector:nth-of-type(6
)  .sector:nth-of-type(7
)  .sector:nth-of-type(12
) 

1 color=['

pink
','yellow
','#66ccff']
2for(var i=1;i<=12;i++)

以上就可以實現乙個向上的三角形

到此初步預習了扇形和三角形的畫法，當然這個轉盤還沒有完全實現，包括轉盤每個區的概率，轉盤上的文字等，後面會逐步完善。第一次寫部落格，排版也不是很滿意，後面在改善嘿嘿，如果大佬有什麼意見或者看法可以私聊我o(∩_∩)o

第一次寫部落格 HTML和CSS

本人於2020年7月份畢業，在工廠裡大概幹了半年，在今年明確了就業的方向，開始學習web前端的內容，今天想簡單介紹一下html和css。什麼是html 根據w3c定義，html全稱hyper text markup language 中文全稱 超文字標記語言 用於定義文件的內容結構 可以通過html...

第一次寫部落格 java中的三角形

第一次寫部落格，不知道寫的啥，就整理下最簡單的三角形。package practice 各種用 實現的不規則三角形 public class startest system.out.println 控制換行 實現 for int i 1 i 4 i i控制行 system.out.println 控...

素數和（第一次自己寫）

最近學翁愷老師程式設計入門 c語言 為了方便自己以後複習和整理，我邊做邊寫了這些。題目內容 我們認為2是第乙個素數，3是第二個素數，5是第三個素數，依次類推。現在，給定兩個整數n和m，0輸入格式 兩個整數，第乙個表示n，第二個表示m。輸出格式 乙個整數，表示第n個素數到第m個素數之間所有的素數的和，...