CSS3 Shapes

bookmarkCSS3access_time3 years ago1 year agopersoncssstarschat_bubble0

With the introduction of CSS3, use of shapes in websites become easier than using different different images for different shapes. CSS3 shapes, now a days used by most of the UI developers. CSS Shapes describe geometric shapes for use in CSS. With CSS3, we can create Circle, Oval, Square, Rectangle, Triangle, Star, Pentagon, Heart, Infinity. This can be achieved with a few css and with just a single html element. With the introduction of CSS Shapes into the web, wrapping content in custom non-rectangular shapes become so interesting. All the latest browsers suppor CSS3 shapes.

CSS3 Shapes Example

Equal Triangle

HTML for Equal Triangle

<div id="shape-eq-triangle"></div>

CSS for Equal Triangle

CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen