html - 父八 Angular 形中的整齐嵌入八 Angular 形

我试图用另一个八角形中的文本插入一个八角形以模拟边框。但是，正如您从我的代码中看到的那样，较小八角形的奇数白角正在破坏事物。另外，如果将角设置为与较大的八边形相同的颜色，则不能有较细的边框，这是我的偏爱。

body {
  background-color: purple;
}
#octagon {
  width: 558px;
  background: red;
  position: relative;
  left: 10px;
  top: 260px;
  z-index: 1;
}
#octagon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 500px;
  height: 0;
}
#octagon:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid red;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 500px;
  height: 0;
}
#octagon p {
  padding: 50px;
}
#octagonTwo {
  height: 264px;
  width: 578px;
  background: aquamarine;
  position: relative;
}
#octagonTwo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid aquamarine;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 520px;
  height: 0;
}
#octagonTwo:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid aquamarine;
  border-left: 29px solid white;
  border-right: 29px solid white;
  width: 520px;
  height: 0;
}

<div id="octagon">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div id="octagonTwo"></div>

最佳答案

由于您在内部p处具有很好的填充，因此我们可以使用它并获得透明的角：

（几个尺寸需要调整）

body {
  background-color: purple;
}
#octagon {
  width: 558px;
  background: red;
  position: relative;
  left: 10px;
  top: 20px;
  z-index: 1;
}
#octagon:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  width: 500px;
  height: 0;
}
#octagon:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-top: 29px solid red;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  width: 500px;
  height: 0;
}
#octagon p {
  padding: 21px 50px;
  margin-top: 46px;

}
#octagonTwo {
  height: 206px;
  width: 578px;
  background: aquamarine;
    position: absolute;
    top: 48px;
}
#octagonTwo:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  border-bottom: 25px solid aquamarine;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  width: 528px;
  height: 0;
}
#octagonTwo:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  border-top: 25px solid aquamarine;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  width: 528px;
  height: 0;
}

<div id="octagon">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div id="octagonTwo"></div>