问题标签 [css-shapes]

考虑以下 HTML 选项卡式菜单：

不确定这是否可行，但我想让标签的形状看起来像这样，带有边框半径。没有图像。顶部很容易，但底部，它是如何在线弯曲的部分我不知道是否可能：

这是jsfiddle

我有一个图形背景，我需要在左上角显示一个彩色三角形（与分辨率无关）。

我可以仅使用宽度 = 100% 且高度 = 200px 且背景 = 红色的 HTML/CSS/JS 创建三角形元素吗？

我可以通过宽度 = 100% 的 IMG 创建它，但我希望有一个比调整图像大小更好的解决方案。

解决方案需要兼容 IE7+ 并使用浏览器的版本（超过 2%）。

谢谢

我有这张图片（附件）。我不是设计师，但我不想在我的应用程序中使用该图像。我听说你可以非常接近使用 css 的图像。有人可以帮我处理这张图片并变成一个css等价物吗

谢谢！

尝试过

不知道如何将其添加到我当前的 css 也尝试过

上面的问题是我的文本不再有背景...如果我使用背景颜色，那么我将不得不使用左边框：10px 纯白色，这在不同的背景图像上看起来不太好，因为这一层会坐在图像的顶部。

我想创建一个看起来像标记或吉他拨片的纯CSS形状。

我一直在使用的 Codepen 演示：http: //codepen.io/Vestride/pen/otcem

我一直没有成功地复制弯曲的边缘。理想情况下，我想用一个元素（+伪元素）来实现这一点。

我怎样才能得到一个弯曲的文本框，比如只有 html 和 css 的 Facebook 状态文本框？

任何人都可以说明我如何做到这一点？

我一直在试图弄清楚如何在 CSS 中制作一个在视觉上看起来像这样的自定义形状：

background:rgba(44, 44, 48, 0.9)具有和的属性border:6px solid rgba(29, 30, 35, 0.9);

我的问题是我找不到一种方法让右上角和左下角的边框看起来像我提供的图像。在 CSS-Tricks 上尝试了有关 CSS 自定义形状的提示，但它似乎没有解决问题，因为它没有背景。有任何想法吗？

我一直在研究带有锯齿形边框的标题。一种方法是使用图像来制作锯齿形效果。

(1) 有没有什么方法可以在不使用图片的情况下，在 CSS 中创建一个实用的跨浏览器之字形边框？

我还试图在这个标题上放置一个纹理背景，延伸到锯齿形。但是，标题的垂直大小可能会发生变化，我无法将标题实现为单个图像。

如果我尝试为之字形边缘和标题元素添加纹理，则很有可能纹理将不同步。

(2) 关于实现延伸到曲折而不同步的纹理背景的任何想法？

我的 [旧] 代码（连同纹理）在jsFiddle上。

编辑＃1：

谢谢安娜的代码。我接受并改进了它。

http://dabblet.com/gist/3401493

我认为不可能有一致的背景。

我正在使用border-radius 属性来实现圆角。但我不确定如何获得这种形状的圆角。我尝试从两侧给出相同的尺寸，但它们只是不给我确切的形状。我在这里错过了一些 CSS3 属性吗？

只是想知道剪辑 css 属性是否是答案。

更新：

http://jsfiddle.net/YWnzc/136/

希望创建这个：

实现它的最佳方法是什么？

它必须： 我绝对希望将文本保留为文本（因此不使用图像）。另外，我希望它可以重复使用，以便我可以在其中放入不同的文本。理想情况下，箭头部分应与文本一样高。

很高兴： 我希望能够将它放在任何背景上（所以它并不总是在白色上）如果它是 ie8+ 那就太好了

谢谢！！

我想知道是否有可能构建具有不规则形状的 div，类似于此（例如格陵兰、欧洲、非洲）。我想使用 CSS3 和 HTML5 创建像这里这样的地图。

这是示例图像的链接：