纯 Css 绘图扇形的方式示例

2020-10-16 13:44 jianzhan

阅读文章此文需具有基础数学课专业知识:圆心角、弧度制、3角涵数。

为完成以下实际效果尽心竭力:

自然你能够拥抱 Svg...在此共享怎样纯 Css 打造圆环进度条,只需3步!

此物乃 2 + 1 夹心饼干,蓝翠绿色一部分为果酱。不言而喻饼干为两个削变成圆形的 div,大家关键演试果酱是如何制做的:

如图所示,大扇形由 6 个小扇形组成,每小扇形占全部圆饼的 1/15,大扇形占全部圆饼的 6/15。大家只需结构1个扇形模块,将其拷贝 6 份后转动相应角度联接至1起便可。

怎样结构扇形?用3角形掩藏...

3角形的宽高怎样测算?假设圆半径 $radius 为 100px,等分数 $count 为 15。则小扇形的圆心角为 360deg / 15,3角形的高为 100px,宽为 2 * 100px * tan(360deg / 15 / 2)。在其中 360deg / 15 / 2 转换弧度制为 PI / 15(PI == 360deg / 2)。

span {
    width: 0;
    height: 0;
    border: $radius solid transparent;
    $borderWidth: tan(pi() / $count) * $radius;
    border-left-width: $borderWidth;
    border-right-width: $borderWidth;
}

数学课较差的同学请自主科普...

针对 $count 为 1 或 2 的状况需独特解决,由于 tan(PI) 及 tan(PI / 2) 为无限值,不上解的同学请科学研究正切涵数图象:

有关编码(在其中 $diameter = 2 * $radius 为圆直径):

span {
    @if $count == 1 {
        width: $diameter;
        height: $diameter;
    } @else if $count == 2 {
        width: $diameter;
        height: $radius;
    } @else {
        width: 0;
        height: 0;
        border: $radius solid transparent;
        $borderWidth: tan(pi() / $count) * $radius;
        border-left-width: $borderWidth;
        border-right-width: $borderWidth;
    }
}

最终,拷贝并逐1转动扇形模块:

@for $index from 0 to $count {
    span:nth-child(#{$index + 1}) {
        $transform: translate(⑸0%, 0) rotate(360deg / $count / 2 + 360deg * $index / $count);
        $origin: if($count == 2, bottom, center);
        -webkit-transform: $transform;
                transform: $transform;
        -webkit-transform-origin: $origin;
                transform-origin: $origin;
    }
}

果酱制做结束,其它装点请自主加上喽...本例详细编码在此。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。