div[class] {
  display:inline-block;
  width:150px;
  color:red;
  margin:10px;
  background:#fff;
  filter:blur(5px) contrast(10);
  padding:10px;
}
.hexagone::before {
   content:"";
   display:block;
   padding-top:86.6%;
   background:currentColor;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.triangle::before {
   content:"";
   display:block;
   padding-top:86.6%;
   background:currentColor;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.star::before {
   content:"";
   display:block;
   padding-top:100%;
   background:currentColor;
   clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.arrow::before {
   content:"";
   display:block;
   padding-top:70%;
   background:currentColor;
   clip-path: polygon(40% 0%, 40% 40%, 100% 40%, 100% 60%, 40% 60%, 40% 100%, 0% 50%);
}
.custom::before {
   content:"";
   display:block;
   padding-top:100%;
   background:currentColor;
   clip-path: polygon(50% 0%, 50% 50%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}