问题标签 [css-shapes]

我想知道是否有比我现在做的更简单的方法来创建圆形 div。

目前，我只是为每种不同的尺寸制作一个图像，但这样做很烦人。

无论如何使用CSS来制作圆形的div，我可以指定半径吗？

我想将一个数字围成一个圆圈，如下图所示：

这可能吗？它是如何实现的？

有谁知道如何实现这样的倾斜：

使用 CSS 的新转换属性？

如您所见，我正在尝试倾斜两个角，有人知道这是否可能吗？

我想知道你们中是否有人知道是否有可能使任何东西看起来像这样：

我知道http://www.infimum.dk/HTML/slantinfo.html但我不能在倾斜区域中放置任何文本。

我只关注最新一代的浏览器：

• IE9（还没有真正研究过一次）
• FF4
• 铬10
• Safari5
• iOS 3.4
• 歌剧？

我知道我可以很容易地得到正方形和矩形，圆形和带有圆形边框的省略号（圆形：W=H，省略号：W!=H）。我知道我可以通过边框设置获得斜坡。我知道如何获得 1/2 和 1/4 圈，但是否有可能获得：

• 馅饼楔形（任何尺寸，在圆圈的任何位置？即 18% 的楔形，水平偏离 20%）
• 梯形、八角形、五角形、六角形
• 星星（n 颗尖星）
• 此处未提及的任何单个形状

我正在寻找 CSS + DIV 选项，而不是<canvas>选项。我也在寻找使用最少嵌套 div 的选项。这是一个示例，它在一个示例中显示了几种形状...

我刚刚遇到了一个巧妙的 CSS 技巧。看看小提琴...

这会创建一个类似箭头/三角形的效果，即“工具提示尾巴”。这让我大吃一惊！我真的很想知道这是如何工作的？！

此外，有没有办法扩展这个 CSS 技巧来创建如下效果：

这是一个有趣的问题。这可以只使用 CSS 来完成，暂时忽略阴影吗？

更新 1

我想出了一个解决我最初的问题的方法。这是小提琴...

http://jsfiddle.net/duZAx/7/

HTML

CSS

现在，我如何使用纯 CSS 完全模仿上面的小图片，包括阴影并使其跨浏览器兼容？

更新 2

结合以下答案后，这是我的解决方案。我没有在多个浏览器上测试过它，但它在 Chrome 中看起来很棒。

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

CSS

我将如何创建一个包含 IMG 的 DIV，其中 DIV 将图像切割成三角形，从而通过三角形仅显示图像的一部分。

所以..

其中图像是正方形，但包含图像的 DIV 是三角形。 http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/很好地解决了这个问题，除了这个解决方案对 x 浏览器不友好（非 ie）。

http://css3pie.com/看起来很有趣，但这依赖于 PHP。

I need to shape ONE div tag in the following shape:

Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two divs.

我正在尝试使用 HTML 和 CSS 创建一个流畅的圆圈。我几乎完成了，但由于它应该是流动的并且里面的内容是动态的，所以它的形状从圆形变成了椭圆形等等。

你能帮我吗？

我需要创建一个 DIV wherewidth=height和height=100%viewport （显然，它是可变的）。

换句话说，一个完美的正方形 DIV，它根据视口的高度计算它的尺寸。该 DIV 中的元素将其尺寸作为父 DIV 的高度和宽度的百分比。

在我看来，这在 CSS 中应该很简单，但我已经坚持下去了！任何指针将不胜感激。