CSS3 Shapes

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

#shape-eq-triangle {
	  width: 0;
	  height: 0;
	  border-bottom: 104px solid #434343;
	  /* 104 = 120 * 0.866 */
	  border-left: 60px solid transparent;
	  border-right: 60px solid transparent;
	}

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

Pentagon Shape

Following is the html for css for pentagon shape.

.pentagon-shape { 
    position: relative; 
    width: 54px; 
    border-width: 50px 18px 0; 
    border-style: solid; 
    border-color: red transparent; 
} 
.pentagon-shape:before { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    top: -85px; 
    left: -18px; 
    border-width: 0 45px 35px; 
    border-style: solid; 
    border-color: transparent transparent red; 
}

Example for Pentagon Shape

More examples for CSS3 Shapes