javascript - 使用 css 和 javascript 遮蔽圆形图像的扇区

Question

我有一个简单的圆形图像，上面有一个相同尺寸和不透明度为 0.4 的叠加 div。我只想遮蔽图像的一部分，即如果我给它 100 度，我希望它显示仅 260 度的覆盖半透明 div 的圆形部分。我搜索了很多，但不确定如何执行此操作。

这是覆盖 div 的 CSS:

.shade {
    position: absolute;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color:#ffffff;
    opacity: 0.4
}

Answer 1

这可能会帮上大忙。它适用于 CSS3 饼图，但也许您可以使用其中一些技术通过直接 CSS 完成您想要的。

http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/