【CSS】绘制一个任意角度的扇形

今天药忘吃喽~ 2022-05-26 06:55 343阅读 0赞

现在有这样一个需求，我们要用html 和 css绘制这样一个图形（sry，这水印不知道咋去掉，o(╯□╰)o）：

![70][]

我们首先可能想到的就是先画三角形，然后使用border-radius，是的我也是这样想的，比如div元素是这样：

结果如下，其他的情况可以通过旋转 可 多个div重叠来实现。

![70 1][]

但是看我们上面的需求。。基础形状是一个60度的扇形。。。咋整 。。。,我们只有想其他办法了，也想过多个1/4圆，来做旋转，但是行不通！

\------分割线------

之前犯了一个错误，想当然将border的宽度设置为一样，当然是一个直角了。但是我们也可以构造一个60度的三角形，我们将border-bottom /border-top 与border-left/border-right设置的不一样，计算一下，就可以得到，但是不能根据某一个单独的块拼成一个圆：【错误更正，其实是可以做到的，我们观察蓝色模块，我们可以构造3个蓝色，3个绿色，最后画一个圆，用overflow：hidden隐藏溢出的部分 但是略复杂0.0】

![70 2][]

最后怎么解决呢？ 通过css3 的 变形函数 transform function : [skew ][skew]来解决。这个要自己走一遍才知道怎么倾斜（我是理解成翻转一定角度）。

这个属性我们不详述了，自己去走下，也可以点击[这个链接][Link 1]查看其它的应用。

我们的思路如下图：

![70 3][]

画一个圆，然后定义一个子元素，然后对其倾斜，变成下面这样：

![70 4][]

好了，这个角度的问题通过skew来解决了，我们对这个元素旋转一下就行了：

![70 5][]\\

已经到这一步了，我们对比现在和需求，就知道该怎么做了吧？！ **其实关键是 通过skew来求一个角度的形状，然后是旋转的初始位置[transform-origin][]的定义。**之前虽然用过skew，但是忘记了！

也可以点击[这个链接][Link 2]查看transform-origin的各种情况

下面是完整的代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>扇形</title>
      <style>
      
    
    .pie {
    	position: relative;
    	margin: 1em auto;
    	padding: 0;
    	width: 32em;
      height: 32em;
    	border-radius: 50%;
    	list-style: none;
      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;
    }
    
      </style>
    </head>
    <body>
    
    <ul class='pie'>
        <li class='slice-one slice'> </li> 
        <li class='slice-two slice'> </li>
        <li class='slice-three slice'> </li>
        <li class='slice-four slice'> </li>
        <li class='slice-five slice'> </li>
        <li class='slice-six slice'> </li>
      <ul>
    </body>
    </html>

其实我不是原创，我只是拿别人的灵感来完成这个，[原链接点我][Link 3]。 感谢这些乐于分享的人~

思路二： conic-gradient 角向渐变，后头再试试

还可以通过svg的stroke 以及 svg 来画！

[70]: /images/20220526/35f6c895fe094955bc894ca5ae6c3a15.png
[70 1]: /images/20220526/eff8a99b90914bfb9403306a7d877030.png
[70 2]: /images/20220526/dcffe6dec52e43318674a72ef16a5478.png
[skew]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew
[Link 1]: https://github.com/aeolusheath/FrontExersize/blob/master/css/css-magic/third-charpter/3.2.1_%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%B9%E5%BD%A2_parallelograms.html
[70 3]: /images/20220526/1b0a4958476e422b80c0c961f2314466.png
[70 4]: /images/20220526/92bf9f61cfeb45238926f64d5fe96a81.png
[70 5]: /images/20220526/2a0b4d5448ac40ce8120ec00de1cc545.png
[transform-origin]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
[Link 2]: https://c.runoob.com/codedemo/3391
[Link 3]: https://stackoverflow.com/questions/14184494/segments-in-a-circle-using-css3/14185845#14185845