CSS3 Templates - What is Possible?

I only look at the latest browsers:

  • IE9 (in fact, it is not considered so much)
  • Ff4
  • Chrome10
  • Safari5
  • iOS 3.4
  • Opera?

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

  • Ping-wedge (any size, anywhere in the circle, i.e. 18% of the wedge, 20% of the horizontal).
  • Trapezoid, octagon, pentagon, hexagon
  • Stars (n pointed stars)
  • Any of the individual figures in this that are not yet mentioned.

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

+4
source share
1 answer

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

+9
source

Source: https://habr.com/ru/post/1346849/


All Articles