Question

我需要一个灵活的大六边形网格，理想情况下

在纯CSS中（没有预处理或JS shenanigans）
percent中的六边形尺寸，所以一切都很好，反应灵敏

我从this great answer一起攻击的解决方案非常优雅，但是在放大我们的时候（通过pinch to zoom或{{}，在Safari（MacOS 10.12.4上的10.1）中产生了非常难看的故障。 1}}）。边缘都搞砸了，需要一段时间才能清理，有时它根本不会清理。

＆＃13;

CMD +/-

＆＃13;

html,
  body {
    margin: 0;
    padding: 0;
  }

  #grid {
    /*otherwise there's some stuff running over to the right corner */
    /*TODO this stuff really should not be there*/
    overflow: hidden;
    background-color: lightgrey;
    width: 100vw;
    height: 100vh;
    position: relative;
    /*other gradients: #2196f3, #f44336 or: #d3959b, #bfe6ba (best) or: #5fc3e4, #e55d87*/
    background: -webkit-linear-gradient(left, #bfe9ff, #ff6e7f);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #bfe9ff, #ff6e7f);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #bfe9ff, #ff6e7f);
    /* For Fx 3.6 to 15 */
    background: linear-gradient(left, #bfe9ff, #ff6e7f);
    /* Standard syntax (must be last) */
  }
  /**
   Hexagon Construction
   hexagons are here constructed by https://codepen.io/elbarto84/pen/wrcob
   For more reasons / alternatives, see here: https://github.com/maxheld83/accio/issues/84
   */

  .hex {
    position: relative;
    float: left;
    overflow: hidden;
    padding: calc(100% / 6.5 / 2);
    -webkit-transform:  rotate(0deg)
                        skewY(30deg)
                        scaleX(0.866025403784439); /* sqrt(3)/2 */
    -ms-transform:      rotate(0deg)
                        skewY(30deg)
                        scaleX(0.866025403784439); /* sqrt(3)/2 */
    transform:          rotate(0deg)
                        skewY(30deg)
                        scaleX(0.866025403784439); /* sqrt(3)/2 */
    margin-top: calc(100% / 6.5 / 1.732050807568877 * -1/6.5); /* sqrt(2) */
    opacity: 0.4;
  }

  .hidden {
    visibility: hidden;
  }

  .hex:before, .hex:after {
    position: absolute;
    /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    top: 6.7%;
    right: 0;
    bottom: 6.7%;
    left: 0; /* 6.7% = (100% -86.6%)/2 */
    -webkit-transform:  scaleX(1.154700538379252) /* 1.155 = 2/sqrt(3) */
                        skewY(-30deg)
                        rotate(-30deg);
    -ms-transform:      scaleX(1.154700538379252) /* 1.155 = 2/sqrt(3) */
                        skewY(-30deg)
                        rotate(-30deg);
    transform: scaleX(1.154700538379252) /* 1.155 = 2/sqrt(3) */
               skewY(-30deg)
               rotate(-30deg);
    background-color: white;
    content: '';
  }

  .hex-row {
    position: relative;
  }

  .hex-row:first-child {
    /*this weirdly acts only on first row and moves it down again to normal position*/
    margin-top: calc(100% / 6.5 / 1.732050807568877 * 1/6.5); /* sqrt(2) */
  }

  .hex-row:nth-child(even) {
    left: calc(100% / 13);
  }

＆＃13;

这在某种程度上是可以挽救的，还是这个设计出现了根本性的错误？

我基本上可以使用我想要的任何设计，我只是喜欢单一解决方案，而设计需要响应（理想情况下在<body> <div id="grid"> <div class="hex-row"> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> </div> <div class="hex-row"> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex hidden"> </div> <div class="hex"> </div> </div> <div class="hex-row"> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> </div> <div class="hex-row"> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> </div> <div class="hex-row"> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> <div class="hex"> </div> </div> </div> </body>）。

六角网格形状（通过变换）在Safari（10.1 Mac OS）中产生毛刺

0 个答案: