边框不能使用溢出

Question

我正在尝试使用3个矩形制作蓝色六边形。我旋转每个矩形，并希望使用overflow:hidden，以便只剩下蓝色矩形。这适用于铬，但不适用于safari。

这是代码段：

  .hex {
    width: 22%;
    padding-bottom:25.04%;
    display:block;
    margin-left: 1%;
    margin-right: 1%;
    overflow:hidden;
    background-color: red;
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .hex2 {
    position:absolute;
    width: 100%;
    height: 100%;
    background-color: green;
    overflow: hidden;
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
  }
  
  .hexIn-2 {
    position:absolute;
    width: 100%;
    height: 100%;
    background-color: blue;
    overflow: hidden;
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

<div style="widht:100%;margin:10%">

  <div class="hex">
    <div class="hex2">
      <div class="hexIn-2">

      </div>
    </div>
  </div>

</div>

当我在Chrome中运行时，我得到了所需的结果，一个蓝色六边形：

当我在safari中运行它时，我得到了这个，因为你可以看到overflow:hidden不起作用，因为其他两个矩形超出了红色的那个。

我认为问题在于它们位于包含红色矩形的div的填充内，并且box-sizing:border-box无法正常工作。有什么想法吗？