如何使用css裁剪图像的一部分

Question

我有以下背景图片

我如何仅使用css使外圈的3/4可见并且可选择如下：

我只能使用

创建一个可见且可选的圆圈

a.outer-ring{
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;

然而，我无法弄清楚如何移除内圈以及如何移除1/4圈（如披萨片）。

Answer 1

我全心全意地不推荐它，但http://jsfiddle.net/csswizardry/QLrJj/1/（更清楚：http://jsfiddle.net/csswizardry/QLrJj/）

编辑：我深入了解这个想法;这是一个非常简洁的淘汰赛效果http://jsfiddle.net/csswizardry/QLrJj/8/show/基于此，我写了http://csswizardry.com/2011/11/create-a-notched-current-state-nav/

ħ

Answer 2

是的，你可以用纯css实现这一点。检查一下

http://jsfiddle.net/QLrJj/9/