CSS 绘制任意角度扇形-渐变图像(css)

洲_
2,877 阅读2分钟

  • 我目前了解的方案有 4 种

  • 今天我们继续, 本文我们就来说说第三种方法 渐变图像

  • 我认为这个是所有方法里面最简单的一种了, 实现代码也是最少的

  • 虽然简单, 的他涉及到的知识点还是挺重要的, 我们先来说一下用到的知识点

conic-gradient() 知识点

  • CSS函数 conic-gradient()  创建了一个由渐变组成的图像
  • 渐变的颜色变换围绕一个中心点旋转（而不是从中心辐射）。
  • conic-gradient() 函数的结果是 <gradient> 数据类型的对象，是一种特殊的 <image> 数据类型。

语法

/* 一个旋转 45 度的锥形渐变，从蓝色渐变到红色 */
conic-gradient(from 45deg, blue, red);

/* 一个蓝紫色框：从蓝色渐变到红色，但只有右下象限可见，因为锥形渐变的中心位于左上角 */
conic-gradient(from 90deg at 0 0, blue, red);

/* 色轮 */
background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);

实现扇形

讲完了 conic-gradient, 我们来看看具体要怎样实现吧

第一步, 创建基础盒子

image.png

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

$sector-size: 80px;

.sector {
    display: inline-block;
    width: $sector-size;
    height: $sector-size;
}
  • $sector-size 可以快捷的修改尺寸;
  • $base-color 设置背景颜色;

第二步, 实现扇形基本结构

image.png

$active-color: #4C84FF;
$base-color: #EEEEEE;

.sector {
    // ...
    background-image: conic-gradient(
        $active-color 0, $active-color 25%,
        $base-color 25%, $base-color 100%
    );
}
  • 通过 conic-gradient 实现 background 的渐变效果(虽然没看到渐变效果, 但也是渐变的一种)
  • 扇形的基本效果已经出来了, 我们把他改成圆形(扇形)就可以了

第三步, 实现扇形

image.png

.sector {
    // ...
    border-radius: 50%;
}
  • 这就结束了, 所以是不是很简单呢

相关示例

已更新 CSS 渐变图像-示例

小结

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

相关文档

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

参考文档

developer.mozilla.org/zh-CN/docs/…

avatar
文章
阅读
粉丝