CSS实现扇形和三角(记第一次写博客(*^_^*)

前言:

网页，APP里经常要画写圆形，三角形，扇形。方法当然有很多，用css或者js如何实现呢？正好在笔试中遇到一题画抽奖轮盘，可我一时却想不起怎么画扇形，查阅资料把问题解决后，在博客里记录下加深记忆和理解，下面进入正题

一、先画出一个转盘，而转盘不就是很多扇形拼接而成的吗？那怎么去画一个扇形呢？效果如下

 

　　看上去是不是无从下手，那就让我来分析下

　　假设有如下HTML：

 <div class="sector">
     <div class="inner"></div>
 </div>

　　则下面的CSS就可以生成上面那个30°的扇形：

 .sector {
     width: 300px; height: 300px;
     position: absolute;
     clip: rect(0 300px 300px 150px);//利用clip裁剪
     overflow: hidden;
 }
 .inner {
     width: 100%; height: 100%;
     background: currentColor;
     position: absolute;
     clip: rect(0 150px 300px 0);
     transform: rotate(30deg);
     border-radius: 50%;
 }

 

　看着这两段代码应该稍微的理解这个扇形的形成了吧

    1. 外面容器原本是个正方形，但通过clip剪裁只显示右半部分；
    2. 子元素同样尺寸，但通过clip剪裁只显示左半部分。然后通过适当旋转露出我们想要的扇形区域；

　原理示意图如下：

有了一个扇形一整个转盘还远吗？相信你也会了，但是我还是想给出我的成果(●ˇ∀ˇ●)
　　下面就是一整个转盘的html结构(过于冗余，折叠)
　　　　 
 1 <div class="sector">
 2    <div class="inner"></div>
 3 </div>
 4 <div class="sector">
 5    <div class="inner"></div>
 6 </div>
 7 <div class="sector">
 8    <div class="inner"></div>
 9 </div>
10 <div class="sector">
11    <div class="inner"></div>
12 </div>
13 <div class="sector">
14    <div class="inner"></div>
15 </div>
16 <div class="sector">
17    <div class="inner"></div>
18 </div>
19 <div class="sector">
20    <div class="inner"></div>
21 </div>
22 <div class="sector">
23    <div class="inner"></div>
24 </div>
25 <div class="sector">
26    <div class="inner"></div>
27 </div>
28 <div class="sector">
29    <div class="inner"></div>
30 </div>
31 <div class="sector">
32    <div class="inner"></div>
33 </div>
34 <div class="sector">
35    <div class="inner"></div>
36 </div>
View Code
下面是转盘样式的css代码，只需要给每个外部容器偏移个角度，错开他们的位置
.sector:nth-of-type(1) {
     transform: rotate(0);//偏移角度
     color: #9ED110;    
 }
 .sector:nth-of-type(2) {
     transform: rotate(30deg);
     color: #9ED110;    
 }
  .sector:nth-of-type(3) {
     transform: rotate(60deg);
     color: #9ED110;    
 }
 .sector:nth-of-type(4) {
     transform: rotate(90deg);
     color: #9ED110;    
 }
 .sector:nth-of-type(5) {
     transform: rotate(120deg);
     color: #9ED110;    
 }
 .sector:nth-of-type(6) {
     transform: rotate(150deg);
     color: #9ED110;    
 }
 .sector:nth-of-type(7) {
     transform: rotate(180deg);
     color: #9ED110;    
 }
 .sector:nth-of-type(12) {
     transform: rotate(330deg);
     color: #EDE604;    
 }
是不是觉得上面有些麻烦，重复做着类似的事，所以我想着用js实现试下，如果要修改扇形数量，颜色等，也不需要复杂的操作
 1 color=['pink','yellow','#66ccff']
 2 for(var i=1;i<=12;i++){    
 3     var sector=document.createElement('div')
 4     sector.className='sector'//为每个外部容器添加类
 5     sector.style.transform="rotate("+30*(i-1)+"deg)"//设计偏移角度
 6     var inner=document.createElement('div')
 7     inner.style.backgroundColor=color[i%3]
 8     inner.className='inner'
 9     sector.appendChild(inner)
10 }
到此圆盘已经基本做完了，以下成果展示：

二、接下来就是要画转盘上的指针了，这里就涉及到css实现三角形，顺带复习下

 border-width: 0 20px 40px 20px;
 border-style: solid;
 border-color: transparent transparent #ff9933 transparent;//以上就可以实现一个向上的三角形

三、以上就可以合成一个转盘，下面是完整代码(包括简单让转盘转起来)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .sector {
 8                 width: 100%; height: 100%;
 9                 position: absolute;
10                 clip: rect(0 300px 300px 150px);
11                 overflow: hidden;
12             }
13             .inner {
14                 width: 100%; height: 100%;
15                 position: absolute;
16                 clip: rect(0 150px 300px 0);
17                 transform: rotate(30deg);
18                 text-align: left;
19                 border-radius: 50%;
20             }
21             
22             #wrap,.center{
23                 position: absolute;
24                 left: 0;
25                 top: 0;
26                 right: 0;
27                 bottom: 0;
28                 margin: auto;
29             }
30             #wrap{
31                 width: 300px;
32                 height: 300px;
33             }
34             .center{
35                 width: 40px;
36                 height: 40px;
37                 background-color: #ff9933;
38                 border-radius: 50%;
39             }
40             .tran{
41                 width: 0;
42                 height: 0;
43                 border-width: 0 20px 40px 20px;
44                 border-style: solid;
45                 border-color: transparent transparent #ff9933 transparent;
46                 margin-top:-20px;
47                 transform-origin:bottom center;
48                 transition:transform 3s cubic-bezier(.2,.93,.43,1);
49             }
50         </style>
51     </head>
52     <body>
53         <div id="wrap">
54             <div class="center">
55                 <div class="tran"></div>
56             </div>
57         </div>
58         <script type="text/javascript">
59             color=['pink','yellow','#66ccff']
60             for(var i=1;i<=12;i++){    
61                 var wrap=document.querySelector('#wrap')
62                 var center=document.querySelector('.center')
63                 var sector=document.createElement('div')
64                 sector.className='sector'
65                 sector.style.transform="rotate("+30*(i-1)+"deg)"
66                 var inner=document.createElement('div')
67                 inner.style.backgroundColor=color[i%3]
68                 inner.className='inner'
69                 sector.appendChild(inner)
70                 wrap.insertBefore(sector,center)
71             }
72             var center=document.querySelector('.center')
73             var tran=document.querySelector('.tran')
74             var r=720
75             center.onclick=function(){//让转盘转起来
76                 r=Math.random()*1000+r
77                 tran.style.transform="rotate("+r+"deg)"
78             }
79         </script>
80     </body>
81 </html>

完整预览图：

到此初步预习了扇形和三角形的画法，当然这个转盘还没有完全实现，包括转盘每个区的概率，转盘上的文字等，后面会逐步完善。第一次写博客，排版也不是很满意，后面在改善嘿嘿，如果大佬有什么意见或者看法可以私聊我O(∩_∩)O
 
posted @ 2020-09-12 23:17  白马过平川Z  阅读(523)  评论(0)    收藏  举报