CSS3形状 - 什么可能？

问题描述

我正在查看最新的浏览器：

• IE9 >
  
• FF4


• Chrome10


• Safari5


• iOS 3.4


• Opera

我知道我可以方便地获得正方形和矩形，圆形和椭圆形：W = H，省略号：W 1 = H）。我知道我可以使用边框设置获取。我知道如何获得1/2和1/4圆，但它是可能得到：

• 饼状楔






• 任何位置在圈子中的任何位置n个星形）


• 是在一个示例中显示几个形状的示例...
  解决方案

  查看此页面的一些示例：。示例仅使用一个HTML元素，因此更多的可能会增加复杂性。

  
  

  I'm looking at only latest gen browsers:

  • IE9 (haven't really looked into this once much)
  • FF4
  • Chrome10
  • Safari5
  • iOS 3.4
  • Opera?

  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:

  • 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

  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...

  解决方案

  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形状 - 什么可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！