CSS - Shapes

Circle

The circle() function creates a circular shape. It takes a radius value, which can be a length or a percentage. The circle is drawn from the center of the element.

.circle {
  shape-outside: circle(50%);
}

This creates a circular shape with a radius of 50% of the element's width.

Ellipse

The ellipse() function creates an elliptical shape. It takes two radius values: one for the x-axis and one for the y-axis. These values can be lengths or percentages.

.ellipse {
  shape-outside: ellipse(100px 50px);
}

This creates an elliptical shape with a width of 100px and a height of 50px.

Inset

The inset() function creates a rectangular shape. It takes four values: top, right, bottom, and left. These values define the distances from the respective edges of the element.

.inset {
  shape-outside: inset(10px 20px 30px 40px);
}

This creates a rectangular shape that is inset 10px from the top, 20px from the right, 30px from the bottom, and 40px from the left.

Polygon

The polygon() function creates a polygonal shape. It takes a series of points, defined by x and y coordinates. These points are connected in the order they are listed to form the shape.

.polygon {
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

This creates a diamond-shaped polygon. The points are: top center, right middle, bottom center, and left middle.

These basic shapes provide a good starting point for creating more complex layouts with CSS Shapes. In the next section, we'll look at how to create shapes from box values.

margin-box

The margin-box value uses the outer margin edge of the element as the shape. The shape follows the contours of the margin.

.margin-box {
  shape-outside: margin-box;
}

The shape will be defined by the outer edge of the element's margin.

border-box

The border-box value uses the outer border edge of the element as the shape. The shape follows the contours of the border.

.border-box {
  shape-outside: border-box;
}

The shape will be defined by the outer edge of the element's border.

padding-box

The padding-box value uses the outer padding edge of the element as the shape. The shape follows the contours of the padding.

.padding-box {
  shape-outside: padding-box;
}

The shape will be defined by the outer edge of the element's padding.

content-box

The content-box value uses the content edge of the element as the shape. The shape follows the contours of the actual content.

.content-box {
  shape-outside: content-box;
}

The shape will be defined by the edge of the element's content.

Using box values to define shapes gives you flexibility. You can change an element's margin, border, padding, or content to create the shape you want. This method is useful when you want the shape to change based on the element's size.

In the next section, you'll learn how to use images to create more complex shapes.

Using images as shapes

To use an image as a shape, set the shape-outside property to the URL of the image. The image should have transparent areas where you want the content to flow.

.image-shape {
  shape-outside: url(path/to/image.png);
}

The content will now wrap around the non-transparent parts of the image.

The image used for the shape doesn't have to be shown on the page. You can use the shape-image-threshold property to control how the image is used to create the shape. This property takes a value between 0 and 1, where 0 means the shape will follow the fully transparent areas, and 1 means it will follow the fully opaque areas.

Transparent images for complex shapes

For more complex shapes, you can use images with varying levels of transparency. The areas of the image that are fully transparent will be where the content flows, while the opaque areas will define the shape.

You can create these images using a graphics editor like Photoshop or GIMP. Start with a transparent background, then add your shape using black or any fully opaque color. The transparent areas will let the content flow through.

.complex-shape {
  shape-outside: url(path/to/complex-shape.png);
  shape-image-threshold: 0.5;
}

Using images for shapes opens up many possibilities for unique and interesting layouts. You can create shapes that would be impossible with CSS alone, and you can even use images from your design to integrate the shapes seamlessly.

In the next section, we'll explore how to use CSS Shapes with floats to create even more layout options.

Floating text around shapes

To make text float around a shape, you first need to float the element that has the shape applied to it. Then, the text will wrap around the contours of the shape.

<div class="shape"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

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

The paragraph text will wrap around the circle. You can control the space between the shape and the text using the shape-margin property. This property takes a length value and creates a margin around the shape.

.shape {
  shape-outside: circle(50%);
  shape-margin: 20px;
}

Now there will be a 20px space between the shape and the text.

Shaping elements with floats

You can also use floats to shape elements themselves. By floating an element and applying a shape to it, you can create uniquely shaped elements.

<div class="shaped-element"></div>

.shaped-element {
  float: left;
  width: 300px;
  height: 300px;
  background-color: #f0f0f0;
  shape-outside: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

This creates a hexagonal shaped element by using the polygon() function. The element is floated to the left, so other content will wrap around it.

By combining shapes and floats, you can create layouts that break out of the traditional rectangular box model. Text can flow around shapes in natural and appealing ways, and elements can take on unique and interesting forms.

In the next section, we'll look at how to combine CSS Shapes with clipping for even more control over your layouts.

Creating shapes with clip-path

The clip-path property lets you create a clipping region that defines what part of an element should be shown. Everything outside of this region is made transparent. You can use basic shapes or SVG paths to define the clipping region.

<div class="clipped-element"></div>

.clipped-element {
  width: 300px;
  height: 300px;
  background-color: #f0f0f0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

This creates a diamond-shaped element by clipping a square element with a polygon. The parts of the element outside the polygon are made transparent.

Combining shapes and clipping

You can use shape-outside and clip-path together to create interesting effects. The shape-outside property defines the shape that content should wrap around, while clip-path defines the visible area of the element.

<div class="shape-clip"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

.shape-clip {
  float: left;
  width: 300px;
  height: 300px;
  background-color: #f0f0f0;
  shape-outside: circle(50%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

In this example, the text will wrap around a circular shape, but the actual element is clipped into a hexagonal shape. This creates a unique interplay between the text and the element.

You can get creative by combining different shapes for shape-outside and clip-path. For instance, you could have text wrapping around a circular shape while the element itself is a star shape.

By using shapes and clipping together, you can create layouts that are visually appealing and functionally unique. This technique gives you control over how your content interacts with your design elements.