html - 环形div

Question

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

我正在尝试创建一个环形 div。下面是它应该是什么样子。

这是我到目前为止所做的。我怎样才能得到从左下角到顶部的轻微曲线？我怎样才能为右侧创建倒曲线？

谢谢你。

Answer 1

您可以添加第二个圆圈，将您不想看到的图像部分变白。

例如，如果您添加带有 id 的第二个 div（在第一个 div 内）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/457188​​2

图片：

老实说，我不确定像这样的扭曲效果很好——你通常不会得到你想要的结果，而且它很可能不能在旧浏览器上很好地工作；也不一定在实现这些 CSS 属性的较新版本的较新浏览器上。

Answer 2

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

border-top-right-radius: XXX

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