问题标签 [css-shapes]

尝试为我的 css 三角形（边框）使用自定义十六进制颜色。但是，由于它使用边框属性，我不确定如何去做。仅仅因为兼容性，我想避开 javascript 和 css3。我试图让三角形有一个带有 1px 边框（围绕三角形的角边）的白色背景，颜色为 #CAD5E0。这可能吗？这是我到目前为止所拥有的：

我的小提琴：http: //jsfiddle.net/4ZeCz/

我正在尝试创建一组人字形 div，并遇到了这篇文章，其中功能区具有内部三角形形状。 http://css-tricks.com/snippets/css/ribbon/

我试图添加一个跟随三角形的外部边框，这将实现我正在寻找的效果，而无需使用图像。

不幸的是，当我尝试添加 box-shadow 时，我最终在 div 周围出现了一个方形阴影，而不是在三角形位周围出现了一个阴影。

关于如何实现这一目标的任何建议？

我正在尝试在锚点中垂直居中文本。我使用了 line-height 并且它可以工作，但是当文本换行时，第二行中的文本获得 line-height ......我怎样才能将文本在锚点中居中而不会像那样失败？

运行此代码片段并单击圆圈以显示其他圆圈，您将明白我的意思。

我想支持尽可能多的浏览器。如果您添加额外的属性以支持更多浏览器，请通过添加注释说明哪一行适用于哪个浏览器。

我正在一个我们使用视差效果的网站上工作。因为有一些图像是三角形的，像这样

& 图像是透明的，因为它与上面的 DIV 重叠。我正在用 css 尝试很多东西。但没有得到想要的结果。我以固定宽度实现了预期的结果。检查此http://jsfiddle.net/eJ7Sf/2/ 但不适用于流体宽度。检查我仍在尝试但没有奏效的方法

http://jsfiddle.net/ceGGN/3/

http://jsfiddle.net/eJ7Sf/1/

注意：我知道 css3 MASK属性，但它不适用于 firefox 以前的浏览器。我想要Firefox 3.6.13之前的功能

我可以像这样把一个 div 变成一个圆圈：

但我必须指定宽度高度：

我想用“不换行”在 DIV 中显示三行文本，因此 3 段文本中的每一个都有自己的行并且没有被换行。

我想将这些显示在一个圆圈的中心，并让圆圈扩大以适合文本行。

文本行将通过 PHP 从数据库中提取，并且字符长度会有所不同。

问题是上面显示的方法仅在指定宽度/高度时才有效。

这是否可能仅使用 CSS 使用百分比，或者我需要一个 JS 解决方法。

提前致谢。

是否可以仅使用 HTML 和 CSS 创建下面的弯曲帆形状？

我可以从这个答案中看到，我可以使用以下方法创建一个直边帆：

看起来像：

或者我可以更接近边界半径：

看起来像这样：

但并不像我想要的那样优雅。顶部的帆图像具有柔和优雅的曲线。

不使用图像我可以做得更好吗？

所以，我需要使用 CSS 制作一个重复的六边形图案。如果需要图像，我可以去那里，但如果可能的话，我宁愿只使用 CSS。

这是我要创建的内容的想法：

基本上，我只需要一种方法来创建六边形，然后在它们上面覆盖文本/图像。我还没有太多代码，因为我不确定从哪里开始。问题是，我可以只使用<div>六边形形状的 s，如 ( http://css-tricks.com/examples/ShapesOfCSS/ ) 所示，但它们不会连接。我可以使用重复的六边形图案，但是我无法指定特定形状中所需的文本或图像的确切位置。感谢您提前提供任何帮助。

我正在创建一个 javascript 小部件来调整相邻 div 的大小，以便在用户将鼠标悬停在 div 上时显示更多的背景图像。这很简单，并且可以很好地与具有直边的 div 配合使用（显然）。然而，边界边缘“需要”倾斜。

有没有一种简单的方法使用 css3 在 2 个 DOM 元素之间制作倾斜边框？

我遇到过 css3 转换（即倾斜）和对角线边框技巧（使用半色半透明），但这些似乎都无法达到我的需要。

我想要达到的效果就像这张图片：

我正在尝试在 CSS 中构造这个形状：

但我不知道如何将三角形（考虑到标签的“主体”有一个矩形，尖端有一个三角形）朝向右侧。因为我正在处理位置，当标签都可以有不同的大小时，我怎么能告诉三角形出现在矩形之后？我就是搞不定。

您可以检查小提琴： http: //jsfiddle.net/ExZFe/，其标签与我正在制作的标签相似。这个例子只使用了位置，所以给三角形一个固定的位置是没有用的。由于同样的原因，我尝试了 :after 但也被卡住了。我错过了什么？先感谢您。

我想创建一个形状，我将其描述为“反圆”：

图像在某种程度上不准确，因为黑线应该沿着 div 元素的外边界继续。

这是我目前拥有的演示：http: //jsfiddle.net/n9fTF/

即使CSS没有图像，这也可能吗？