clip-path couleur

In this example below you will see how to do a clip-path couleur with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tecfly_sandra, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tecfly_sandra ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>clip-path couleur</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="circle"></div>
<div class="pentagon"></div>
<div class="message"></div>
<div class="etoile"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tecfly_sandra/clip-path-couleur-BzmBAO */
div {
  width: 200px;
  height: 200px;
  margin: 20px;
  display: inline-block;
}

.circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
background: #f07052;
}

.pentagon {
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
background: #87c3c1;
}

.message {
  -webkit-clip-path: polygon(0% 0%, 100% 6%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 74%);
clip-path: polygon(0% 0%, 100% 6%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 74%);
background: #89c353;
}

.etoile {
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
background: #ffc552;
}

Comments