主页 / 问题 / 948847
Accepted
Глеб Ростишевский
Asked:2020-02-25 00:18:26 +0000 UTC2020-02-25 00:18:26 +0000 UTC

六边形布局[关闭]

  • 772

向更有经验的人寻求帮助。我才学习了3个月，我学习了第二个布局，有这个部分：

怎么布置，问题是蜂窝上有不同的边框？
另外，它是如何胜任而不是静态定位的？
请帮助，我已经打破了我的头。

html

1 个回答

  1. Best Answer

    1 块，为清楚起见，如果您不了解如何： 

    .hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #84ac9b;
  margin: 86.60px 0;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 42.9340px;
}

.hexagon:before {
  top: -106.0660px;
  border-top: solid 1.4142px #333333;
  border-right: solid 1.4142px #333333;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: solid 1.4142px #333333;
  border-left: solid 1.4142px #333333;
}
    <div class="hexagon"></div>

    这里已经实现了所有主要的几何形状。

    • 4

相关问题