Hexagon shadow CSS-CodePudding

Can I give this hexagon a blue shape on the right side and black on the other side(top bottom and left)?

.hex {
  height: 115px;
  width: 118px;
  background: #e4fbff;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  text-align-last: center;
}

<div ></div>

CodePudding user response：

There is 2 big problem

1 : you can't use drop-shadow filter for clip-path directly ( so you need parent div) 2 : drop-shadow has no spread-radius attribute (so if you want smaller hexagon you need create new one)

this is how it work's

body {
  padding: 30px
}

.hex {
  height: 115px;
  width: 118px;
  background: #e4fbff;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  text-align-last: center;
}

#model1 .hexbox {
  filter: drop-shadow(20px 0px 0px blue) drop-shadow(-20px 0px 5px black);
}

#model2 {
  margin-top: 40px;
}

#model2 .hexbox {
  position: relative;
  filter: drop-shadow(-20px 0px 25px #000000);
}

#model2 .hex {
  position: absolute;
}

#model2 .hex.left {
  left: 20px;
  z-index: -1;
  background: blue!important;
  transform: scale(0.9);
}

<h1> right hex same size as main </h1>
<div id="model1">
  <div >
    <div ></div>
  </div>
</div>
<h1> right hex diferent size as main </h1>
<div id="model2">
  <div >
    <div ></div>
    <div ></div>
  </div>
</div>