<html>
  <head>
    <!-- Font support -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,300&display=swap" rel="stylesheet">
    
    <title>CSS clip-path demo by Tapas Adhikary</title>
  </head>  
<body>
  <h1>Shapes using CSS <u>clip-path</u> Property</h1>
  <p align="center">Did you know you can create, manage, export, share various shapes using <a href="https://tryshape.vercel.app/" terget="_blank" rel="noopener noreferrer" >TryShape</a>?</p>
  <div class="container">
    <div class="grid">
      <div class="wrapper">
        <div class=" demo circle"></div>
        <span>Circle</span>
      </div>
      <div class="wrapper">
        <div class="demo ellipse"></div>
        <span>Ellipse</span>
      </div>
      <div class="wrapper">
        <div class="demo square"></div>
        <span>Suare</span>
      </div>
      <div class="wrapper">
        <div class="demo tilted-square"></div>
        <span>Tilted Square</span>
      </div>
      <div class="wrapper">
        <div class="demo kite"></div>
        <span>Kite</span>
      </div>
      <div class="wrapper">
        <div class="demo semi-circle"></div>
        <span>Semi Circle</span>
      </div>
      <div class="wrapper">
        <div class="demo house"></div>
        <span>House</span>
      </div>
      <div class="wrapper">
        <div class="demo star"></div>
        <span>Bended star</span>
      </div>
      <div class="wrapper">
        <div class="demo heart"></div>
        <span>Heart</span>
      </div>
      <div class="wrapper">
        <div class="demo curve"></div>
        <span>Curve</span>
      </div>
    </div>
    <div class="footer">
        Made with ❤️ by 
        <a 
           target="_blank" 
           rel="noopener noreferrer"    
           href="https://twitter.com/tapasadhikary">
          @tapasadhikary
        </a>
    </div>
  </div>
  <svg>
    <clipPath 
      id="heart-path" 
      clipPathUnits="objectBoundingBox">
        <path d="M0.5,1
          C 0.5,1,0,0.7,0,0.3
          A 0.25,0.25,1,1,1,0.5,0.3
          A 0.25,0.25,1,1,1,1,0.3
          C 1,0.7,0.5,1,0.5,1 Z" />
    </clipPath>
  </svg>
  
  
</body>
</html>  
html,body {
  height: 100%;
  box-sizing: border-box;
  background: #fff8f8;
  margin: 0.5rem auto auto 0.5rem;
  font-family: 'Crimson Pro', serif;
  scroll-behavior: smooth;
}

h1 {
  font-size: 35px;
  text-align: center;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.demo {
  width: 330px;
  height: 330px;
  background-color: #00c2cb;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #60e4e5;
  margin: 0.8rem;
  background-color: #d2f5f57a;
}

.wrapper SPAN {
  width: 100%;
  background: #ebebeb;
  text-align: center;
  font-weight: 700;
}

.footer {
  text-align: center;
  padding: 1rem;
  font-size: 20px;
}

.circle {
  clip-path: circle(50% at 50% 50%)
}

.ellipse {
 clip-path: ellipse(25% 40% at 50% 50%);
}

.square {
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)
}

.tilted-square {
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)
}


.kite {
 clip-path: polygon(35% 15%, 90% 10%, 100% 59%, 23% 67%, 48% 85%);
}

.semi-circle {
  clip-path: circle(50% at 90% 50%);
}

.house {
  clip-path: polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%);
}

.star {
  clip-path: polygon(50% 0%, 62% 34%, 100% 41%, 71% 59%, 100% 100%, 48% 71%, 0% 100%, 24% 59%, 2% 35%, 31% 32%);
}

.heart {
  clip-path: url(#heart-path);
}

.curve {
  clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.