How can I draw a hexagon and fit all children to its fullest?

Question

I need to make a hexagon that contains mini shapes inside of it. Like so:

I can make a hexagon div but I cant get my smaller shapes fit in it. They fit as if my hexagon is a rectangle.

I tried:

<style>
.hexagon {
    overflow: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon1 {
   width: 400px;
   height: 200px;
   margin: 0 0 0 -80px;
}
</style>
<div class="hexagon hexagon1"><div class="hexagon-in1"></div></div>

This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. — Paulie_D, Sep 28 '17 at 14:56
Be aware that that **ALL** HTML elements are **rectangular**. You're going to need a lot of HTML/CSS **and** JS to get this working. — Paulie_D, Sep 28 '17 at 14:57
I have edited my question and tried to be more specific and with code. Thanks for your insight, I need to implement a shape instead of rectangular that's why I posted it here @Paulie_D — Kunal, Sep 28 '17 at 15:12
OK...but the point here is that there is only **one** shape available in HTML...a rectangle. You can *fake* other shapes bit that's all they are. That's why this is too broad. — Paulie_D, Sep 28 '17 at 15:18
Thank you @stojkosd I am trying another solutions with SVG's and Jquery. — Kunal, Sep 28 '17 at 15:31
I know @Paulie_D that's why i thought someone might have a guess on how to implement this. And even not giving the solution maybe lead me on the right direction... — Kunal, Sep 28 '17 at 15:33
@stojkosd I am working on this solution: https://www.sarasoueidan.com/blog/css-shapes/ — Kunal, Sep 28 '17 at 15:46
@Kunal good to know, I will try to make reusable sass hex generator. — stojkosd, Sep 28 '17 at 15:50
Possible duplicate of [Responsive grid of hexagons](https://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons) — TylerH, Sep 28 '17 at 20:10
Also duplicate of [Generate repeating hexagonal pattern with CSS3](https://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3) — TylerH, Sep 28 '17 at 20:10

stojkosd · Accepted Answer · 2017-09-28T20:09:10.487

Hex shape generator using Sass

HTML

<div class="hex-shape"></div>

SASS(scss)

// need for mathematical calculations
$SQUARE_ROOT_3: 1.73;
$hex-shape-w: 100px;
$hex-shape-h: round($hex-shape-w / $SQUARE_ROOT_3);
$hex-shape-color: red;

.hex-shape {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: $hex-shape-w;
  height: $hex-shape-h;
  background-color: $hex-shape-color;
  margin: ($hex-shape-h / 2) 0;

  &::before,
  &::after {
    position: absolute;
    left: 0;
    content: '';
    display: inline-block;
    border-bottom: $hex-shape-h / 2 solid $hex-shape-color;
    border-right: $hex-shape-w / 2 solid transparent;
    border-left: $hex-shape-w / 2 solid transparent;
  }

  &::before {
    top: -50%;
  }

  &::after {
    bottom: -50%;
    transform: scale(-1);
  }

  &:hover {
    background-color: green;

    &::before,
    &::after {
      border-bottom-color: green;
    }
  }
}

This is shape generator.

And I did one pen exmple https://codepen.io/stojko/pen/boWOwK?editors=1100

You can change shape size by changing $hex-shape-w variable and also if you make them bigger you must change $hex-container-w variable.

I wish I had more time to do this with JavaScript.

If you find this answer helpful, let me know.

wow this is perfect @stojkosd! Thank you very much! I also implemented a solution but I didn't manage to make the right spacing between the shapes yet. I am going to use your code and wrap it in a for loop thank you very much. I will also post my solution also — Kunal, Sep 29 '17 at 09:04

How can I draw a hexagon and fit all children to its fullest?

1 Answers1