Question

我只需要一个六边形边框。我找到了一个生成器网站CSS Hexagon并完全复制了给定的代码。但是我在同一个浏览器中使用相同的doctype获得了完全不同的结果。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style  type="text/css">
.hexagon {
  position: relative;
  width: 190px; 
  height: 109.70px;
  background-color: #64C7CC;
  margin: 54.85px 0;
  border-left: solid 10px #ff2828;
  border-right: solid 10px #ff2828;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 134.35px;
  height: 134.35px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 17.8249px;
}
.hexagon:before {
  top: -67.1751px;
  border-top: solid 14.1421px #ff2828;
  border-right: solid 14.1421px #ff2828;
}
.hexagon:after {
  bottom: -67.1751px;
  border-bottom: solid 14.1421px #ff2828;
  border-left: solid 14.1421px #ff2828;
}
</style>
</head>
<body>
	<div class="hexagon">
	</div>
</body>
</html>

＆＃13;

正如您所看到的，边界不是应该的样子。

Picture of the Result

那么我做错了什么？谢谢你的帮助！

Answer 1

显然他们遗漏了你也需要这条规则：

*,*:before,*:after {
    box-sizing:border-box;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style  type="text/css">
.hexagon {
  position: relative;
  width: 190px; 
  height: 109.70px;
  background-color: #64C7CC;
  margin: 54.85px 0;
  border-left: solid 10px #ff2828;
  border-right: solid 10px #ff2828;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 134.35px;
  height: 134.35px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 17.8249px;
}
.hexagon:before {
  top: -67.1751px;
  border-top: solid 14.1421px #ff2828;
  border-right: solid 14.1421px #ff2828;
}
.hexagon:after {
  bottom: -67.1751px;
  border-bottom: solid 14.1421px #ff2828;
  border-left: solid 14.1421px #ff2828;
}
*,*:before,*:after {
    box-sizing:border-box;
}

</style>
</head>
<body>
	<div class="hexagon">
	</div>
</body>
</html>

＆＃13;

CSS Hexagon Border无法正常工作

1 个答案: