CSS Shapes

clip-path, shape-outside, border-radius, and creative shapes.

Overview

CSS shapes create visual elements beyond rectangles.

Key Concepts

• clip-path — Clip elements to shapes
• shape-outside — Float text around shapes
• border-radius — Rounded corners
• Conic gradients — Circular shapes
• Polygon — Custom shape paths

Code Examples

/* Basic shapes with clip-path */
.circle { clip-path: circle(50%); }
.ellipse { clip-path: ellipse(50% 30%); }
.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* Rounded elements */
.full-round { border-radius: 50%; }
.rounded { border-radius: 12px; }
.pill { border-radius: 9999px; }

/* Shape outside for text wrap */
.circle-shape {
  float: left;
  width: 150px;
  height: 150px;
  shape-outside: circle(50%);
}

.ellipse-shape {
  float: right;
  width: 200px;
  height: 100px;
  shape-outside: ellipse(50% 50%);
}

/* Polygon shape */
.polygon-shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(0% 0%, 100% 0%, 100% 100%);
}

/* Creative shapes */
.bubble {
  background: var(--primary);
  border-radius: 20px;
  position: relative;
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: var(--primary) transparent transparent transparent;
}

/* Speech bubble */
.speech-bubble {
  background: white;
  border: 2px solid #ddd;
  border-radius: 12px;
  position: relative;
  padding: 1rem;
}

.speech-bubble::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 20px;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent #ddd;
}

/* Animated shapes */
.morphing-shape {
  width: 100px;
  height: 100px;
  background: var(--primary);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
}

/* Donut shape */
.donut {
  width: 100px;
  height: 100px;
  background: conic-gradient(var(--primary) 0deg, var(--primary) 270deg, #ddd 270deg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut::after {
  content: '';
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
}

Practice

Create a shape gallery with clip-path and shape-outside.