CSS 绘制任意角度扇形--遮盖/旋转

• 前几天写了一篇实现进度条的文章 环(圆)形进度条
• 其实他的本质是实现一个扇形, 今天尝试做一个扇形
• 如果要做一个 90 度, 180 度 和 270 度的扇形还是相对简单的
• 如果我们想实现任意角度的扇形那怎么办呢?
• 我目前了解的方案有 3 种
  • 在一个矩形上方设置 2 个小矩形, 通过小矩形的旋转实现 (本文)
  • 通过 css clip-path 实现 (CSS 绘制任意角度扇形--clip-path)
  • 通过 css background-image 渐变图像 实现 (CSS 绘制任意角度扇形-渐变图像(css) CSS 渐变图像-示例)
  • 使用 svg 的功能实现
• 本文我们就来说说第一种方法

第一步, 我们先放置一个矩形

<div class="sector">
    <span class="cover-1"></span>
    <span class="cover-2"></span>
</div>

$sector-size: 100px;
$base-color: #EEEEEE;

.sector {
    display: inline-block;
    width: $sector-size;
    height: $sector-size;
    background-color: $base-color;
    border-radius: 50%;
}

• $sector-size 可以快捷的修改尺寸;
• $base-color 设置背景颜色;
• 通过设置 border-radius: 50%, 使得到的图形为圆;

第二步, 设置 cover 的样式

.sector {
    // ...
    position: relative;
    overflow: hidden;

    .cover-1, .cover-2 {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: $base-color;
    }
}

• 对 cover 使用定位, 我们希望相对于父级进行定位所以对父级设置 position: relative;
• 为了防止 cover 显示内容超出父级, 这里我们设置 overflow: hidden;

第三步, 让 cover1 旋转

$active-color: #4C84FF; // 新增

.sector {
    // ...
    .cover-1 {
        background-color: $active-color;
        transform-origin: right;
        transform: rotate(45deg);
    }
}

• 新增 $active-color 颜色变量, 用于选中的样式
• 因为我们要以右侧中间为圆心进行旋转, 所以设置: transform-origin: right;

第四步, 当角度大于 180 时

.sector {
    // ...
    .cover-1 {
        // ...
        transform: rotate(45deg);
    }
    
    .cover-2 {
        left: 50%;
        background-color: $active-color;
    }
}

• 当旋转角等于 180 时, 我们把 cover-2 移动到右侧, 并且设置为选中的颜色

最后效果图

小结

• 这就是一步一步的处理过程了
• 下期将会尝试用 clip-path 实现

相关文档

CSS 绘制任意角度扇形--clip-path
CSS 绘制任意角度扇形-渐变图像(css)
CSS 绘制任意角度扇形-渐变图像-示例
环(圆)形进度条
css 实现关闭(close) Icon