html - 环形格

Question

实际上我有两个问题。我会尽可能多地解释它们。

我正在尝试创建一个环形 div。它应该如下所示。

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

谢谢。

Answer 1

您可以添加第二个圆圈来遮盖您不想看到的图像部分。

例如，如果您添加第二个 div(在第一个 div 中)，其 id 为 cutout 并将其设置如下样式:

#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 属性的新版本的新浏览器上。