Get Started With CSS Shapes

Posted By : Mahima Gautam | 27-May-2018

It has been observed that web designers have been made bound to create or design things within the constraints of the rectangle. Mostly the content used on the web are trapped in the simple boxes. CSS Shapes helps the website designers to wrap the content along 0the customized path, like circles, ellipses, and polygons, and however breaking the stereotype form of constraints of the rectangle.

 

Creating shapes manually

 

CIRCULAR() FUNCTION

 

Rather than extracting shapes from the images, we can also code them manually. we can choose some functional values for creating shapes: circle(), ellipse(), inset() and polygon(). Each function of the shape accepts some set of the coordinate system. The complete notation of circle shape values are a circle(r at cx cy) in which r is the radius and cx cy is the coordinates of circle center on X and Y axis.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

 

The example used above, the content will be wrapped around the circular path. The argument 50%  used above specifies the radius of the circle in this case, the amounts to half of element' width and height. If we change dimensions of the element the radius of the circle will also change.

 

ELLIPSE() FUNCTION

 

Ellipses are squished circles. These are defined as ellipses (rx ry at cx cy) in which rx and ry are radii of ellipses on X and Y axis and cx and cy are coordinates of the center of the ellipse.

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

 

This radiis on X and Y axis can also be defined with the keywords: farthest-side it yields the radius that has been equal to the distance between ellipse center and side of reference box, and closest-side means it the exact opposite i.e using the shortest distance between the center and side. 

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

 

POLYGON() FUNCTION

 

If these circle and ellipses functions are making you limit, then this polygon function opens a number of option. The format for polygon function is a polygon(x1 y1, x2  y2, ...) in which we specify the pairs of x and y coordinates for each of the vertex of the polygon. The least number of pairs for specifying polygon is three just like a triangle. 

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

 

The vertices are placed on the coordinate system. For achieving the responsiveness we can use percentage values for some or all of coordinates.

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

About Author

Author Image
Mahima Gautam

Mahima has a good knowledge of HTML and CSS. She is working as a UI Developer and she loves to dance in her free time.

Request for Proposal

Name is required

Comment is required

Sending message..