html - 在父八 Angular 形中整齐地插入八 Angular 形

Question

我试图在另一个八 Angular 形中插入一个带有文本的八 Angular 形来模拟边框。然而，正如您从我的代码中看到的那样，较小的八 Angular 形的奇怪的白色 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>

Answer 1

因为你在内部 p 中有很好的填充，我们可以使用它来获得透明 Angular :

(有几个维度需要调整)

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>