我可以用CSS获得这些弯曲的角落吗？

Question

我需要创建这个布局，我想尽可能多地使用CSS，而不是使用图像等等。

因此，我如何在CSS中执行此操作？ （如果有的话？）

正如您所看到的，背后有图像，按钮上覆盖了填充。我正在努力的一点就是在按钮的上方和左侧以及按钮右下方的IMAGE上创建曲线（我已经在下面的图片中指出了它们）。

任何帮助都会很棒。

由于

Answer 1

我知道足够的CSS是危险的所以我不能详细说明每一步，但我认为你可以这样做：

将背景图像分割为两个单独的图像，两个图像的z-index均为0，位于灰色框顶部的高度。我认为你可以使用两个div来引用具有不同偏移的相同原始图像（类似于CSS Sprites），但我不知道如何做到这一点的细节。较低div的左边缘将从灰色框结束的位置开始。围绕每个“图片”div的左下角。

使用适当的舍入将z-index为1的灰色框添加，然后将z-index为2的蓝色框添加为适当的舍入。

包含所有这些的块元素的背景也必须是灰色的，以匹配灰色边框，并正确填充最右箭头指向的灰色。

Answer 2

您根本不需要拆分图像，只需要拆分容器div。

让我详细说一下： 您可以将图像设置为背景图像，而不是将其放在img标记的src属性中。使用CSS sprites时，最常使用此技术。

所以，如果你有一个恒定宽度和高度的最上面的div，如果你尝试在其中应用背景图像，你会发现它非常适合。

在底部，你有两个div或你想要的任何块元素，只要确保放置固定的宽度和高度，所以背景将被应用和你将能够实际看到它。

然后你要做的就是摆弄css background-position来调整SE的图像块。

我将把一个小型演示放在一起，以更好地说明这个想法。 在顶部有一个大div，底部有两个较小的div，其中两个共享相同的背景图像，但背景位置不同，您可以安全地添加一些css3 border-radius以满足您的圆度需求。您还可以使用http://css3generator.com/之类的工具轻松地在所有浏览器上添加兼容性层。

Answer 3

使用纯css很容易实现。您显示的页面分为3个div，没有任何边距。您只需要为每个div设置正确的边框半径。

Answer 4

这是背景图像的函数，如果这是你的意思，它是一个css元素，但它不是选择器的单独属性，至少在标准CSS中不是。等到CSS3变得更加普遍，然后是角落半径或者其他一些东西。

好吧，它可能是3个单独的div，一个洞“烧”在背景图像中，或者一个div被覆盖在按钮上。

了解其完成方式的最佳方法是阅读您找到的网页来源。

为方便起见： 如果您有基于webkit的浏览器（如chrome或safari），则在“右键单击”按钮上启用开发者模式鼠标并选择inspect元素。否则，您可以倾倒页面源，直到找到所需内容。