问题标签 [css-shapes]

这让我发疯，我以前见过它，但无法复制或找到它或任何资源。我正在做的是一条带有皮革纹理和“缝合图案”的垂直丝带。缝合的工作方式很简单，带有虚线边框的内部 div，甚至丝带形状也很容易使用伪:after类，但是将两者结合起来只是不打算计划。

这就是我目前正在使用的 css 所拥有的（这一切都是用 css 减去皮革纹理完成的）：

此外，阴影仍保持“方形”格式，而不是全部形状。为了澄清我不是要求任何人进行调试或类似的事情，我只是要求共享可以达到预期结果的替代或进一步方法，css仍然是我正在学习的东西，所以任何建议或任何东西您可以给予的那种性质将不胜感激，如果您需要任何其他信息，请告诉我。谢谢！

我一直在尝试用 div做白色形状：

http://sircat.net/joomla/sircat/mies/2.png

如何获得 div 底部的对角线形状？

我有这个 div: width: 620px; 高度：440px；背景颜色：白色；

谢谢你

编辑：忘记div后面的bg，我想用对角线边框制作div，而不是在bg的帮助下，因为它在顶层

请看一下http://jsfiddle.net/ghAgQ/ 我需要相同的渐变箭头，因为它是矩形。有什么想法是怎么做到的？谢谢

​</p>

我想使用基本的 CSS 在 HTML 页面中制作三角形。我正在使用需要时间加载的三角形图片，因此，我想减少页面的加载时间。

我知道通过一些边框技巧，我可以创建梯形。我还可以将其边框颜色设置为 rgba(r,g,b,a) 以使其透明。

但是是否可以创建具有透明边框和背景的梯形？

例如，请参见下图，

目前，我使用一些png图片来实现这个效果，但是生成不同大小的图片真的很无聊，所以我正在寻找一个css解决方案。</p>

是否可以在 css（没有图像）中制作具有边框半径和三角形边的项目？

我为这个问题创建了一个jsFiddle。

基本上我的网站上有一个工具提示，它出现在我的链接的右侧。但是在黑盒子的左侧，我想在盒子上附加一个指向链接的三角形，是否可以仅使用 CSS 来做到这一点？就像这样，但在左边

我需要在 div 中创建一个箭头。我已经创建了箭头，但需要获得带有边框的视觉效果，如下所示

试用示例的演示http://jsfiddle.net/rLZkf/4/

我有一个大胆的项目，想要一些建议。我想要一个使用 CSS Diamonds 的网站，我附上了一张图片，以便更好地了解我在做什么。以下是我到目前为止遇到的问题：

• 三角形完全对齐，直到添加一个子菜单，然后右三个向右移动（这在某一点起作用）。子菜单所在的 li 也会丢失其菱形
• 子菜单菱形上的文本未居中。
• 我不能有背景图片，然后是钻石，然后是标题。我尝试了不同的 z-index，但没有奏效。（要查看菜单标题，需要移除背景图片，菱形需要 -1 z-indexed）
• 因为我需要使用 spans 为侧边栏创建三角形文本环绕，所以我不能只将侧边栏 div 设置为菱形，所以我仍然需要在其下方添加菱形。
• 将正确的文本正文和侧边栏文本正文都包裹到菱形会很棒，但是我认为这是不可能的，因此我恢复为仅使用侧边栏包裹。

到目前为止，这是我的 HTML：我已经注释掉了子菜单和我的侧边栏菱形尝试。http://jsfiddle.net/s4XXE/

我希望能够仅使用 CSS 创建一个透明背景，但一端有一个角度。我找到了各种尝试这样做的方法，但无法完全理解。我真的不想使用任何脚本，只是 CSS。

背景图像需要如下所示：