CSS Responsive Hexagon Image Frame

August 19, 2022

I’m trying to make a responsive hexagon image frame, but I’m stuck on aligning the inner hexagon. Does anyone know how to center the inner hexagon? Here’s my code:

.inner {
  background-color: red;
  width: 95%;
  height: 0%;
  padding-bottom: 98%;
  margin-top: auto;
  margin-bottom: auto;
}

.outer {
  background-color: mediumspringgreen;
  width: 12%;
  height: 0%;
  padding-bottom: 13%;
}

.hexagon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  -webkit-clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

<div class="hexagon outer">
  <div class="hexagon inner">
    <img src="https://placekitten.com/400/400" class="absolute inset-0 h-full w-full" alt="" />
  </div>
</div>

My result:

Expected result:

>Solution :

It seems as you use the padding only for your inner div, the outer div only gets that height. I would have a container that you put the width on, then you can add padding to your outer hexagon and absolutely position your inner hexagon:

.container {
  width: 12%;
}

.inner {
  background-color: red;
  width: calc(100% - 10px);
  /* can change this to be a percentage if you want a variable width border.  with calc, the border will always be half of what you subtract */
  height: calc(100% - 10px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer {
  background-color: blue;
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.hexagon {
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}

.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="hexagon outer">
    <div class="hexagon inner">
      <img src="https://placekitten.com/400/400" class="img">
    </div>
  </div>
</div>