CSS Shapes 🔷

Create stunning geometric shapes, complex polygons, and creative layouts using pure CSS - no images required!

What are CSS Shapes?

CSS Shapes allow you to create geometric forms and define how content flows around them. From simple circles to complex polygons, CSS provides powerful tools for creative layouts without relying on images or complex SVG.

🎨 Pure CSS

No images or external resources needed

⚡ Performance

Lightweight and fast rendering

🎯 Creative Freedom

Endless possibilities for unique designs

Basic Geometric Shapes

Foundation Shapes:

Circles: Using border-radius: 50%
Triangles: Creative use of borders
Squares/Rectangles: Basic width and height
Ovals: Elliptical border-radius
Polygons: Using transform properties

Basic Shapes Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Basic Shapes</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .shapes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .shape-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      transition: transform 0.3s ease;
    }
    
    .shape-card:hover {
      transform: translateY(-5px);
    }
    
    .shape {
      width: 120px;
      height: 120px;
      margin: 0 auto 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
    }
    
    .circle {
      background: #e74c3c;
      border-radius: 50%;
    }
    
    .triangle {
      width: 0;
      height: 0;
      border-left: 60px solid transparent;
      border-right: 60px solid transparent;
      border-bottom: 120px solid #3498db;
      background: none !important;
    }
    
    .rectangle {
      background: #2ecc71;
    }
    
    .oval {
      background: #9b59b6;
      border-radius: 50%;
      width: 160px;
    }
    
    .square {
      background: #f39c12;
    }
    
    .rhombus {
      background: #1abc9c;
      transform: rotate(45deg);
      margin: 3rem auto 4rem;
    }
    
    .rhombus-content {
      transform: rotate(-45deg);
    }
    
    .trapezoid {
      width: 160px;
      height: 0;
      border-bottom: 120px solid #e67e22;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      background: none !important;
    }
    
    .parallelogram {
      background: #34495e;
      transform: skew(20deg);
      margin: 0 auto 1.5rem;
    }
    
    .parallelogram-content {
      transform: skew(-20deg);
    }
    
    .code-example {
      background: #2c3e50;
      color: white;
      padding: 1.5rem;
      border-radius: 10px;
      margin-top: 1rem;
      font-family: monospace;
      font-size: 0.9rem;
    }
    
    @media (max-width: 768px) {
      .shapes-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🔷 CSS Basic Shapes</h1>
      <p>Create geometric shapes using pure CSS - no images required!</p>
    </div>
    
    <div class="shapes-grid">
      <div class="shape-card">
        <div class="shape circle">●</div>
        <h3>Circle</h3>
        <div class="code-example">
          border-radius: 50%;
        </div>
      </div>
      
      <div class="shape-card">
        <div class="shape triangle">▲</div>
        <h3>Triangle</h3>
        <div class="code-example">
          border-left: 60px solid transparent;<br>
          border-right: 60px solid transparent;<br>
          border-bottom: 120px solid #3498db;
        </div>
      </div>
      
      <div class="shape-card">
        <div class="shape rectangle">▭</div>
        <h3>Rectangle</h3>
        <div class="code-example">
          width: 120px;<br>
          height: 120px;
        </div>
      </div>
      
      <div class="shape-card">
        <div class="shape oval">⬬</div>
        <h3>Oval</h3>
        <div class="code-example">
          border-radius: 50%;<br>
          width: 160px;<br>
          height: 120px;
        </div>
      </div>
      
      <div class="shape-card">
        <div class="shape square">□</div>
        <h3>Square</h3>
        <div class="code-example">
          width: 120px;<br>
          height: 120px;
        </div>
      </div>
      
      <div class="shape-card">
        <div class="shape rhombus">
          <div class="rhombus-content">◆</div>
        </div>
        <h3>Rhombus</h3>
        <div class="code-example">
          transform: rotate(45deg);
        </div>
      </div>
      
      <div class="shape-card">
        <div class="shape trapezoid">⏢</div>
        <h3>Trapezoid</h3>
        <div class="code-example">
          border-bottom: 120px solid #e67e22;<br>
          border-left: 40px solid transparent;<br>
          border-right: 40px solid transparent;
        </div>
      </div>
      
      <div class="shape-card">
        <div class="shape parallelogram">
          <div class="parallelogram-content">▰</div>
        </div>
        <h3>Parallelogram</h3>
        <div class="code-example">
          transform: skew(20deg);
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Advanced Shapes & CSS Shapes Module

Complex Shapes

Create stars, hearts, pentagons, and other complex shapes using advanced CSS techniques.

/* Heart shape using pseudo-elements */

.heart:before, .heart:after {

border-radius: 50%;

}

Shapes Module

The CSS Shapes Module allows text to flow around custom paths instead of rectangular boxes.

.shape-outside {

shape-outside: circle(50%);

float: left;

}

Advanced Shapes Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Advanced Shapes</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: white;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .advanced-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .advanced-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    .advanced-shape {
      width: 150px;
      height: 150px;
      margin: 0 auto 1.5rem;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
    }
    
    /* Star Shape */
    .star {
      background: #e74c3c;
      clip-path: polygon(
        50% 0%, 
        61% 35%, 
        98% 35%, 
        68% 57%, 
        79% 91%, 
        50% 70%, 
        21% 91%, 
        32% 57%, 
        2% 35%, 
        39% 35%
      );
    }
    
    /* Heart Shape */
    .heart {
      background: #e74c3c;
      transform: rotate(-45deg);
    }
    
    .heart:before,
    .heart:after {
      content: '';
      width: 150px;
      height: 150px;
      background: #e74c3c;
      border-radius: 50%;
      position: absolute;
    }
    
    .heart:before {
      top: -75px;
      left: 0;
    }
    
    .heart:after {
      top: 0;
      left: 75px;
    }
    
    .heart-content {
      transform: rotate(45deg);
      z-index: 1;
      position: relative;
    }
    
    /* Pentagon */
    .pentagon {
      background: #3498db;
      clip-path: polygon(
        50% 0%,
        100% 38%,
        82% 100%,
        18% 100%,
        0% 38%
      );
    }
    
    /* Hexagon */
    .hexagon {
      background: #2ecc71;
      clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
      );
    }
    
    /* Octagon */
    .octagon {
      background: #9b59b6;
      clip-path: polygon(
        30% 0%,
        70% 0%,
        100% 30%,
        100% 70%,
        70% 100%,
        30% 100%,
        0% 70%,
        0% 30%
      );
    }
    
    /* Infinity Symbol */
    .infinity {
      background: #f39c12;
      position: relative;
      overflow: hidden;
    }
    
    .infinity:before,
    .infinity:after {
      content: '';
      width: 60px;
      height: 60px;
      border: 20px solid #f39c12;
      border-radius: 50%;
      position: absolute;
    }
    
    .infinity:before {
      top: 25px;
      left: 15px;
      border-right-color: transparent;
      border-bottom-color: transparent;
      transform: rotate(-45deg);
    }
    
    .infinity:after {
      top: 25px;
      right: 15px;
      border-left-color: transparent;
      border-bottom-color: transparent;
      transform: rotate(45deg);
    }
    
    /* Diamond */
    .diamond {
      background: #1abc9c;
      transform: rotate(45deg);
    }
    
    .diamond-content {
      transform: rotate(-45deg);
    }
    
    /* Talk Bubble */
    .talk-bubble {
      background: #34495e;
      border-radius: 20px;
      position: relative;
      width: 200px;
      height: 120px;
    }
    
    .talk-bubble:after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      border: 20px solid transparent;
      border-top-color: #34495e;
    }
    
    /* CSS Shapes Module */
    .shape-outside-demo {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin-top: 2rem;
    }
    
    .circle-text-wrap {
      shape-outside: circle(50%);
      width: 200px;
      height: 200px;
      float: left;
      background: #e74c3c;
      border-radius: 50%;
      margin-right: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3rem;
    }
    
    .code-example {
      background: #2c3e50;
      color: white;
      padding: 1rem;
      border-radius: 10px;
      margin-top: 1rem;
      font-family: monospace;
      font-size: 0.8rem;
      text-align: left;
    }
    
    @media (max-width: 768px) {
      .advanced-grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .circle-text-wrap {
        float: none;
        margin: 0 auto 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>✨ CSS Advanced Shapes</h1>
      <p>Complex shapes and CSS Shapes Module for advanced layouts</p>
    </div>
    
    <div class="advanced-grid">
      <div class="advanced-card">
        <div class="advanced-shape star">★</div>
        <h3>Star</h3>
        <p>Created using clip-path with polygon points</p>
        <div class="code-example">
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, ...);
        </div>
      </div>
      
      <div class="advanced-card">
        <div class="advanced-shape heart">
          <div class="heart-content">♥</div>
        </div>
        <h3>Heart</h3>
        <p>Using pseudo-elements and transforms</p>
        <div class="code-example">
          .heart:before, .heart:after {
            border-radius: 50%;
          }
        </div>
      </div>
      
      <div class="advanced-card">
        <div class="advanced-shape pentagon">⬟</div>
        <h3>Pentagon</h3>
        <p>Five-sided polygon using clip-path</p>
        <div class="code-example">
          clip-path: polygon(50% 0%, 100% 38%, ...);
        </div>
      </div>
      
      <div class="advanced-card">
        <div class="advanced-shape hexagon">⬢</div>
        <h3>Hexagon</h3>
        <p>Six-sided polygon perfect for grids</p>
        <div class="code-example">
          clip-path: polygon(25% 0%, 75% 0%, ...);
        </div>
      </div>
      
      <div class="advanced-card">
        <div class="advanced-shape octagon">⯅</div>
        <h3>Octagon</h3>
        <p>Eight-sided polygon for stop signs</p>
        <div class="code-example">
          clip-path: polygon(30% 0%, 70% 0%, ...);
        </div>
      </div>
      
      <div class="advanced-card">
        <div class="advanced-shape infinity">∞</div>
        <h3>Infinity</h3>
        <p>Mathematical symbol using borders</p>
        <div class="code-example">
          Uses pseudo-elements with border-radius
        </div>
      </div>
    </div>
    
    <div class="shape-outside-demo">
      <h3>🎯 CSS Shapes Module</h3>
      <div class="circle-text-wrap">T</div>
      <p>This demonstrates the CSS shape-outside property. Text flows around the circular shape instead of a rectangular box. The shape-outside property allows you to wrap content around custom paths rather than just rectangular boxes.</p>
      <p>You can create complex text wrapping around circles, polygons, ellipses, and even images with alpha channels. This is particularly useful for magazine-style layouts and creative designs.</p>
      <div class="code-example">
        .circle-text-wrap {
          shape-outside: circle(50%);
          float: left;
          width: 200px;
          height: 200px;
        }
      </div>
    </div>
  </div>
</body>
</html>

Clip-Path Shapes

Powerful Clipping

The clip-path property allows you to clip an element to a basic shape or SVG path. This is incredibly powerful for creating complex shapes and animations.

/* Circle clip-path */

clip-path: circle(50% at center);

/* Polygon clip-path */

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

Clip-Path Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Clip-Path Shapes</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: #2c3e50;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    .clip-path-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .clip-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      transition: transform 0.3s ease;
    }
    
    .clip-card:hover {
      transform: translateY(-5px);
    }
    
    .clip-shape {
      width: 150px;
      height: 150px;
      margin: 0 auto 1.5rem;
      background: linear-gradient(45deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
      transition: all 0.3s ease;
    }
    
    .clip-card:hover .clip-shape {
      transform: scale(1.1);
    }
    
    /* Clip-path examples */
    .clip-circle {
      clip-path: circle(50% at center);
    }
    
    .clip-ellipse {
      clip-path: ellipse(50% 40% at 50% 50%);
    }
    
    .clip-polygon {
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    }
    
    .clip-star {
      clip-path: polygon(
        50% 0%, 
        61% 35%, 
        98% 35%, 
        68% 57%, 
        79% 91%, 
        50% 70%, 
        21% 91%, 
        32% 57%, 
        2% 35%, 
        39% 35%
      );
    }
    
    .clip-cross {
      clip-path: polygon(
        20% 0%, 80% 0%, 80% 20%, 100% 20%, 
        100% 80%, 80% 80%, 80% 100%, 20% 100%, 
        20% 80%, 0% 80%, 0% 20%, 20% 20%
      );
    }
    
    .clip-frame {
      clip-path: polygon(
        0% 0%, 0% 100%, 25% 100%, 25% 25%, 
        75% 25%, 75% 75%, 25% 75%, 25% 100%, 
        100% 100%, 100% 0%
      );
    }
    
    .clip-arrow {
      clip-path: polygon(
        0% 20%, 60% 20%, 60% 0%, 100% 50%, 
        60% 100%, 60% 80%, 0% 80%
      );
    }
    
    .clip-speech {
      clip-path: polygon(
        0% 0%, 100% 0%, 100% 75%, 
        75% 75%, 75% 100%, 50% 75%, 0% 75%
      );
    }
    
    /* Animation examples */
    .animation-demo {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      margin-top: 2rem;
      text-align: center;
    }
    
    .animated-shape {
      width: 150px;
      height: 150px;
      background: linear-gradient(45deg, #e74c3c, #e67e22);
      margin: 2rem auto;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      animation: morph 4s infinite ease-in-out;
    }
    
    @keyframes morph {
      0% {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }
      25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
      }
      50% {
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
      }
      75% {
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
      }
      100% {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }
    }
    
    .code-example {
      background: #2c3e50;
      color: white;
      padding: 1rem;
      border-radius: 10px;
      margin-top: 1rem;
      font-family: monospace;
      font-size: 0.8rem;
      text-align: left;
    }
    
    .browser-support {
      background: #34495e;
      color: white;
      padding: 1.5rem;
      border-radius: 10px;
      margin-top: 2rem;
    }
    
    @media (max-width: 768px) {
      .clip-path-grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>✂️ CSS Clip-Path Shapes</h1>
      <p>Create complex shapes using clip-path property</p>
    </div>
    
    <div class="clip-path-grid">
      <div class="clip-card">
        <div class="clip-shape clip-circle">○</div>
        <h3>Circle</h3>
        <p>Perfect circular clipping</p>
        <div class="code-example">
          clip-path: circle(50% at center);
        </div>
      </div>
      
      <div class="clip-card">
        <div class="clip-shape clip-ellipse">⬭</div>
        <h3>Ellipse</h3>
        <p>Oval-shaped clipping area</p>
        <div class="code-example">
          clip-path: ellipse(50% 40% at 50% 50%);
        </div>
      </div>
      
      <div class="clip-card">
        <div class="clip-shape clip-polygon">▰</div>
        <h3>Polygon</h3>
        <p>Custom shape with multiple points</p>
        <div class="code-example">
          clip-path: polygon(0% 0%, 100% 0%, ...);
        </div>
      </div>
      
      <div class="clip-card">
        <div class="clip-shape clip-star">★</div>
        <h3>Star</h3>
        <p>Complex star shape</p>
        <div class="code-example">
          clip-path: polygon(50% 0%, 61% 35%, ...);
        </div>
      </div>
      
      <div class="clip-card">
        <div class="clip-shape clip-cross">✚</div>
        <h3>Cross</h3>
        <p>Plus sign shape</p>
        <div class="code-example">
          clip-path: polygon(20% 0%, 80% 0%, ...);
        </div>
      </div>
      
      <div class="clip-card">
        <div class="clip-shape clip-frame">▯</div>
        <h3>Frame</h3>
        <p>Picture frame effect</p>
        <div class="code-example">
          clip-path: polygon(0% 0%, 0% 100%, ...);
        </div>
      </div>
    </div>
    
    <div class="animation-demo">
      <h3>🎬 Animated Clip-Path</h3>
      <p>Watch the shape morph between different clip-path configurations</p>
      <div class="animated-shape"></div>
      <div class="code-example">
        @keyframes morph {
          0% { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
          25% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%); }
          /* ... */
        }
      </div>
    </div>
    
    <div class="browser-support">
      <h3>🌐 Browser Support</h3>
      <p><strong>clip-path</strong> is supported in all modern browsers:</p>
      <ul style="list-style: none; margin-top: 1rem;">
        <li>✅ Chrome 55+</li>
        <li>✅ Firefox 54+</li>
        <li>✅ Safari 9.1+</li>
        <li>✅ Edge 79+</li>
      </ul>
      <p style="margin-top: 1rem;"><strong>Note:</strong> For older browsers, consider using SVG as a fallback.</p>
    </div>
  </div>
</body>
</html>

Practical Applications

👤 User Interfaces

Hexagon avatars, shaped buttons, unique form elements

💬 Communication

Speech bubbles, chat interfaces, tooltips

🎨 Visual Design

Image masks, decorative elements, progress indicators

Practical Applications Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Shapes Practical Applications</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      padding: 2rem;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header {
      text-align: center;
      margin-bottom: 3rem;
      color: #2c3e50;
    }
    
    .header h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    .applications-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }
    
    .application-card {
      background: white;
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    /* Avatar with hexagon shape */
    .avatar-container {
      display: flex;
      align-items: center;
      margin-bottom: 2rem;
    }
    
    .hexagon-avatar {
      width: 80px;
      height: 80px;
      background: linear-gradient(45deg, #667eea, #764ba2);
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
      margin-right: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
    }
    
    /* Pricing card with ribbon */
    .pricing-card {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      padding: 2rem;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
    }
    
    .ribbon {
      position: absolute;
      top: 20px;
      right: -30px;
      background: #e74c3c;
      color: white;
      padding: 0.5rem 3rem;
      transform: rotate(45deg);
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* Speech bubbles */
    .chat-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    
    .message {
      max-width: 70%;
      padding: 1rem;
      border-radius: 15px;
      position: relative;
    }
    
    .message.user {
      align-self: flex-end;
      background: #3498db;
      color: white;
    }
    
    .message.bot {
      align-self: flex-start;
      background: #ecf0f1;
      color: #2c3e50;
    }
    
    .message.user:after {
      content: '';
      position: absolute;
      right: -10px;
      top: 15px;
      border: 10px solid transparent;
      border-left-color: #3498db;
    }
    
    .message.bot:after {
      content: '';
      position: absolute;
      left: -10px;
      top: 15px;
      border: 10px solid transparent;
      border-right-color: #ecf0f1;
    }
    
    /* Shape buttons */
    .shape-buttons {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin: 2rem 0;
    }
    
    .btn {
      padding: 1rem 2rem;
      border: none;
      border-radius: 25px;
      background: #3498db;
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .btn-heart {
      clip-path: polygon(
        50% 0%, 70% 20%, 98% 35%, 80% 60%, 
        50% 100%, 20% 60%, 2% 35%, 30% 20%
      );
      background: #e74c3c;
    }
    
    .btn-star {
      clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 
        79% 91%, 50% 70%, 21% 91%, 32% 57%, 
        2% 35%, 39% 35%
      );
      background: #f39c12;
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    
    /* Image masks */
    .image-mask-demo {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    
    .masked-image {
      width: 100%;
      height: 150px;
      background: linear-gradient(45deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3rem;
    }
    
    .mask-circle {
      clip-path: circle(50% at center);
    }
    
    .mask-triangle {
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    
    .mask-pentagon {
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    }
    
    /* Progress indicators */
    .progress-demo {
      margin: 2rem 0;
    }
    
    .progress-bar {
      width: 100%;
      height: 20px;
      background: #ecf0f1;
      border-radius: 10px;
      overflow: hidden;
      margin: 1rem 0;
    }
    
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #2ecc71, #27ae60);
      clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
      width: 75%;
    }
    
    .code-example {
      background: #2c3e50;
      color: white;
      padding: 1rem;
      border-radius: 10px;
      margin-top: 1rem;
      font-family: monospace;
      font-size: 0.8rem;
    }
    
    @media (max-width: 768px) {
      .applications-grid {
        grid-template-columns: 1fr;
      }
      
      .header h1 {
        font-size: 2rem;
      }
      
      .shape-buttons {
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🚀 Practical CSS Shapes</h1>
      <p>Real-world applications and creative uses for CSS shapes</p>
    </div>
    
    <div class="applications-grid">
      <div class="application-card">
        <h3>👤 Hexagon Avatars</h3>
        <div class="avatar-container">
          <div class="hexagon-avatar">JS</div>
          <div>
            <h4>John Smith</h4>
            <p>Web Developer</p>
          </div>
        </div>
        <p>Hexagon avatars create a modern, distinctive look for user profiles.</p>
        <div class="code-example">
          .hexagon-avatar {
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, ...);
          }
        </div>
      </div>
      
      <div class="application-card">
        <h3>💰 Pricing Cards with Ribbons</h3>
        <div class="pricing-card">
          <div class="ribbon">Popular</div>
          <h3>Professional Plan</h3>
          <p>$49/month</p>
          <ul>
            <li>Unlimited Projects</li>
            <li>Priority Support</li>
            <li>Advanced Features</li>
          </ul>
        </div>
        <div class="code-example">
          .ribbon {
            transform: rotate(45deg);
            position: absolute;
            right: -30px;
          }
        </div>
      </div>
      
      <div class="application-card">
        <h3>💬 Speech Bubbles</h3>
        <div class="chat-container">
          <div class="message user">
            Hello! How are you today?
          </div>
          <div class="message bot">
            I'm doing great! Thanks for asking.
          </div>
          <div class="message user">
            Can you help me with CSS shapes?
          </div>
        </div>
        <div class="code-example">
          .message:after {
            border: 10px solid transparent;
            border-left-color: #3498db;
          }
        </div>
      </div>
    </div>
    
    <div class="application-card">
      <h3>🎯 Shape Buttons</h3>
      <div class="shape-buttons">
        <button class="btn btn-heart">Love</button>
        <button class="btn btn-star">Star</button>
        <button class="btn">Normal</button>
      </div>
      <p>Unique button shapes can make your calls-to-action stand out.</p>
      
      <h3 style="margin-top: 2rem;">🖼️ Image Masks</h3>
      <div class="image-mask-demo">
        <div class="masked-image mask-circle">📷</div>
        <div class="masked-image mask-triangle">🎨</div>
        <div class="masked-image mask-pentagon">✨</div>
      </div>
      
      <h3 style="margin-top: 2rem;">📊 Progress Indicators</h3>
      <div class="progress-demo">
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
        <p>75% Complete</p>
      </div>
    </div>
  </div>
</body>
</html>

Best Practices & Pro Tips

✅ Recommended Approaches

Use clip-path for complex shapes and animations
Consider browser support and provide fallbacks
Use CSS Shapes Module for text wrapping
Optimize performance by minimizing complex shapes
Test shapes on different screen sizes
Use SVG as fallback for very complex shapes

❌ Common Mistakes

Overusing complex shapes affecting performance
Not testing in older browsers
Forgetting to consider accessibility
Using shapes where simple CSS would suffice
Not providing fallbacks for critical content
Ignoring mobile responsiveness

🎯 When to Use Each Method

Basic Shapes (border-radius, borders):

Simple circles, ovals, triangles
Best browser support
Quick and lightweight

Clip-Path:

Complex polygons and custom shapes
Animations and transitions
Modern browsers only

Ready to Shape Your Designs? 🔷

Experiment with CSS shapes and discover the creative possibilities. From basic geometry to complex animations, shapes can transform your designs and create unique user experiences.

< Previous Next >