Shape and path

CSS3 has brought rich shape and path manipulation capabilities to web design, enabling developers to break free from the constraints of traditional rectangular layouts. From basic geometric shapes to complex Bézier curves, these features allow for more flexible visual expression.

Basic Shape Drawing

The border-radius property can easily create rounded rectangles or even perfect circles. When set to 50%, a rectangle becomes a perfect circle:

.circle {
  width: 100px;
  height: 100px;
  background: #ff6b6b;
  border-radius: 50%;
}

Polygons require the clip-path property. The following code creates a hexagon:

.hexagon {
  width: 100px;
  height: 100px;
  background: #4ecdc4;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

SVG Path Conversion

CSS3 supports applying SVG path syntax directly to HTML elements. This heart shape uses the path() function:

.heart {
  width: 100px;
  height: 100px;
  background: #ff9ff3;
  clip-path: path('M10,30 Q20,10 30,30 T50,30 T70,30 T90,30 L50,90 Z');
}

Dynamic Path Animation

Combining @keyframes enables path morphing animations. This example shows a transition from a circle to a triangle:

@keyframes morph {
  0% { clip-path: circle(50%); }
  100% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
}

.shape {
  animation: morph 2s infinite alternate;
}

Complex Path Applications

The offset-path property allows elements to move along a specified path. This rocket icon will fly along a Bézier curve:

<style>
  .track {
    offset-path: path('M20,20 C100,100 300,50 400,150');
    animation: move 3s infinite;
  }
  @keyframes move {
    100% { offset-distance: 100%; }
  }
</style>

<svg class="track" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L4 12l8 10 8-10z"/>
</svg>

Shape and Text Wrapping

The shape-outside property enables non-rectangular text wrapping. This example demonstrates circular text wrapping:

<div class="wrap">
  <div class="circle"></div>
  <p>This is the wrapped text content...</p>
</div>

<style>
  .circle {
    width: 150px;
    height: 150px;
    float: left;
    shape-outside: circle(50%);
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
  }
</style>

Responsive Shape Design

CSS variables enable responsive shape changes. This button alters its shape based on screen size:

:root {
  --button-shape: 10px;
}

@media (max-width: 768px) {
  :root {
    --button-shape: 50%;
  }
}

.button {
  border-radius: var(--button-shape);
  transition: border-radius 0.3s ease;
}

3D Shape Transformations

CSS 3D transforms can create three-dimensional shapes. This cube consists of six faces:

<div class="cube">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face right"></div>
  <div class="face left"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>

<style>
  .cube {
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
  }
  .face {
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0.8;
  }
  /* Face positioning code omitted... */
</style>

Advanced Path Clipping Applications

Multiple paths can be combined to create complex clipping regions. This example uses two circles to form a crescent moon shape:

.crescent {
  width: 100px;
  height: 100px;
  background: #feca57;
  clip-path: circle(50% at 50% 50%) 
             circle(40% at 60% 50%);
}

Combining Shapes with Filters

CSS filters can enhance the visual effects of shapes. This blurred circle features a glow effect:

.glow-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5f27cd;
  filter: blur(5px) drop-shadow(0 0 8px #5f27cd);
}