环形div

Question

其实这里有2个问题。我会尽可能地解释它们。

我正在尝试创建一个环形div。下面是它的样子。

This是我到目前为止所做的。如何从左下角到顶部获得轻微的曲线？如何为右侧创建倒置曲线？

谢谢。

Answer 1

您可以添加第二个圆圈，将您想要查看的图像部分分开。

例如，如果您添加标识为cutout的第二个div（位于第一个div内）并按如下方式设置样式：

#cutout {
    top:250px;
    border-radius: 700px;
    border:300px solid #eee;
    z-index:1;
    left:200px;
    height:200px;
    position:absolute;
}

然后在你的图片中，你会更接近你想要的东西。您还需要将position: relative添加到容器div中，以确保其定位和剪切的位置。

最后，如果你想要剪切图像中所示的环段，你需要添加一个额外的外部div来夹住最里面的两个;你应该用径向背景替换图像。

看起来大概像是：http://dabblet.com/gist/4571882

图片：

老实说，我不确定这样的扭曲效果是否很好 - 你通常不会得到你想要的结果，并且很可能不能很好地在旧浏览器上工作;对于那些实现这些CSS属性的较新版本的新浏览器而言，这也是必然的。

Answer 2

你可以尝试创建一个新的div并添加

border-top-right-radius: XXX

表示倒置段。确保它们正确浮动（例如float:left）。