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

Question

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

因此，我如何在CSS中做到这一点？ （如果有的话？）

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

任何帮助将是伟大的。

感谢

Answer 1

你根本不必拆分图像，只有容器div。

让我详细介绍一下： 您可以将图像设置为背景图像，而不是将其置于img标签的src属性中。使用CSS精灵时，这种技术是最常用的。所以，如果你有最高的div在一个固定的宽度和高度，如果你尝试在其中应用背景图像，你会发现它非常适合。

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

然后，所有你需要做的就是摆弄CSS背景位置来调整图像的SE块。

我会放一个小的演示，可以更好地说明这个思想。 之后，你有在顶部有一个大格，并在底部，其中两个人共享相同的背景图片两个较小，但具有不同背景的位置，你可以放心地加入一些CSS3边框半径，以适应您的圆度的需求。您还可以使用一些工具（如http://css3generator.com/）轻松地在所有浏览器上添加兼容性层。

Answer 2

这是背景图片，这是一个CSS元件的功能，如果这就是你的意思，但它不是选择一个单独的属性，至少不是标准CSS。等到CSS3变得更加优先，然后是角落半径或其他某种东西。

嗯，它可能是3个单独的div，一个“烧”成背景图像的洞，或者一个div覆盖按钮。

弄清楚它是如何完成的最好方法是读取您找到它的页面的来源。

为方便起见： 如果您有一个基于webkit的浏览器，如chrome或safari，然后在按钮“右键单击”上启用开发者模式鼠标并选择检查元素。否则，你可以倒过页面源，直到找到你想要的东西。

Answer 3

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

Answer 4

我知道足够多的CSS是危险的，所以我无法详细介绍每一步，但我认为你可以接近这样的：

在斯普利特的z-index的背景图像分成两个独立的图像都0在灰盒顶部的高度。我认为你可以使用两个div，它们引用具有不同偏移量的相同原始图像（类似于CSS Sprites），但我不知道如何做到这一点的细节。较低的div的左边缘将在灰色框结束的位置开始。绕过每个“图像”的左下角div。

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

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