CSS3 Shapes-有什么可能? [英] CSS3 Shapes - What's possible?

问题描述

我只在查看最新一代的浏览器:

I'm looking at only latest gen browsers:

• IE9(还没有真正研究过这个问题)
• FF4
• Chrome10
• Safari5
• iOS 3.4
• 歌剧?

我知道我可以轻松得到正方形和长方形，带有圆形边界的圆和椭圆(圆:W = H，椭圆:W！= H).我知道我可以使用边框设置获得坡度.我知道如何获得1/2和1/4圆，但是有可能得到:

I know I can get squares and rectangles easy, circles and ellipsis with rounded borders (circles: W=H, ellipsis: W!=H). I know I can get slopes with border settings. I know how to get 1/2 and 1/4 circles, but is it possible to get:

• 楔形楔块(任何大小，在圆上的任何位置吗?即楔形楔块的18％，水平线的20％)
• 梯形，八边形，五边形，六边形
• 星星(n个尖星)
• 此中尚未提及的任何单个形状

• Pie wedge (any size, at any location in the circle? ie. a 18% wedge, 20% off the horizontal)
• Trapezoids, octagon, pentagon, hexagon
• Stars (n pointed stars)
• Any of the individual shapes in this that aren't already mentioned

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

I'm looking for CSS + DIV options, not <canvas> options. I'm also looking for options that use the least amount of nested divs. Here is an example that shows several shapes in one example...

推荐答案

查看此页面以获取一些示例: http://css-tricks.com/examples/ShapesOfCSS/.这些示例仅使用单个HTML元素，因此可能会增加更多复杂性.

Check out this page for some examples: http://css-tricks.com/examples/ShapesOfCSS/. The examples use only a single HTML element, so more would be possible with added complexity.

这篇关于CSS3 Shapes-有什么可能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！