CSS Shapes

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body>
    <h1>CSS Shapes</h1>
    <fieldset>
      <div class="razor"></div>

      <div class="trapezoid"></div>
      <div class="hard-hexagon"></div>
      <div class="arrow-left"></div>
        <div class="arrow-right"></div>

      <div class="star"></div>
    </fieldset>
    <fieldset>
     
      <div class="star"></div>

      <div class="trapezoid"></div>
      <div class="hard-hexagon"></div>
      <div class="octagon"></div>

    </fieldset>
    <fieldset>
      <div class="triangle"></div>
      <div class="fortune"></div>

      <div class="star"></div>
      <div class="trapezoid"></div>

      <div class="triangle"></div>
    </fieldset>
    <fieldset>
      <div class="star"></div>
      <div class="arrow-left"></div>
      <div class="fortune"></div>
      <div class="triangle"></div>
      <div class="trapezoid"></div>   
     </fieldset>
    <fieldset>
      <div class="trapezoid"></div>
  <div class="star"></div>
  <div class="triangle"></div>
      <div class="arrow-right"></div>
      <div class="hard-hexagon"></div>
    </fieldset>
  </body>
</html>

/* Add your styles here */
body {
  font-family: Arial, sans-serif;
  color: #68688d;
}
.hard-hexagon {
  display: inline-block;
  margin-right: 10px;
  width: 100px;
  height: 100px;
  background: #ffdeaa;
  clip-path: polygon(
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0% 50%,
    25% 6.7%,
    75% 6.7%
  );
}

.star {
  display: inline-block;
  margin-right: 10px;
  width: 100px;
  height: 100px;
  background: #ff94a9;
  /* Define the five points of the star */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}
.star:hover {
  background-color: gainsboro;
}
.octagon {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #8cc3e7;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

fieldset {
  background-color: #fff;
  border: 7px solid #bedef3;
  border-radius: 5px;
  margin-bottom: 20px;
  background-image: url(https://www.medcells.ae/wp-content/uploads/2017/05/gradient-bg.jpg);
  background-position: 50% 50%;
  background-repeat: repeat;
  background-size: 116%;
}
.fortune {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #a9fa73;
  clip-path: polygon(0% 0%, 84% 19.6%, 100% 100%, 32% 100%, 58% 45.6%, 0% 70%);
  margin-right: 10px;
}

.trapezoid {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #aaeaf3;
  margin-right: 10px;

  clip-path: polygon(39.8% 0%, 82.4% 0%, 43.8% 100%, 0% 100%);
}
.arrow-left {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #eff764;
  margin-right: 10px;

  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}
.arrow-right {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #6ba5e7;
  margin-right: 10px;

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

.triangle {
  display: inline-block;
  margin-right: 10px;
  width: 100px;
  height: 100px;
  background: #f7b759;
  margin-right: 10px;

  /* Define the five points of the star */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

// Add your code here