在父八角形中整齐地插入八角形

Question

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

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

从你的问题中不清楚你到底要求什么。但是如果你想要一个六边形的边框并删除那些白色的角，你在这里:-

        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 aquamarine;
border-right: 29px solid aquamarine;
width: 500px;
height: 0;
}

#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid aquamarine;
border-right: 29px solid aquamarine;
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 purple;
border-right: 29px solid purple;
width: 520px;
height: 0;
}

#octagonTwo:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid aquamarine;
border-left: 29px solid purple;
border-right: 29px solid purple;
width: 520px;
height: 0;
}

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Octagon</title>

    
</head>

<body>

    <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>

    <script>


    </script>

</body>

</html>

如果不是您想要的，请告诉我。

Answer 2

因为你在内部 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>

Answer 3

我看到这个有点晚了，但是，同样，渐变可以用于此：

div {
  display:inline-block;
  color:white;
  text-shadow:0 0 1px black;
  text-align:justify;
  margin:1em 0;
  padding: 2em;
  width:40%;
  background:/* draw the borders by bits to overlap them */
    linear-gradient(to top, transparent 3em, turquoise 3em) bottom right,
    linear-gradient(to top, transparent 3em, turquoise 3em) bottom left,
    linear-gradient(to bottom, transparent 3em, turquoise 3em) top right,
    linear-gradient(to bottom, transparent 3em, turquoise 3em) top left,
    linear-gradient(to left, transparent 3em, turquoise 3em )  top right,
    linear-gradient(to left, transparent 3em, turquoise 3em ) bottom right,
    linear-gradient(to right, transparent 3em, turquoise 3em )  top left,
    linear-gradient(to right, transparent 3em, turquoise 3em ) bottom left,
    linear-gradient(45deg, transparent 2em, turquoise 2em, turquoise 2.5em, tomato 2.5em, gray) bottom left,
    linear-gradient(-45deg, transparent 2em, turquoise 2em, turquoise 2.5em, tomato 2.5em, gray) bottom right,
    linear-gradient(135deg, transparent 2em, turquoise 2em, turquoise 2.5em, tomato 2.5em, gray ) top left,
    linear-gradient(-135deg, transparent 2em, turquoise 2em, turquoise 2.5em, tomato 2.5em, gray) top right
    ;
  /* size those bits */
  background-size:
    0.5em 50%, 
    0.5em 50%,
    0.5em 50%,
    0.5em 50%, 
    50% 0.5em, 
    50% 0.5em, 
    50% 0.5em, 
    50% 0.5em, 
    50% 50%, 
    50% 50%, 
    50% 50%, 
    50% 50%  ;
  
  background-repeat:no-repeat;
  vertical-align:top;
}
p {
  margin:0;
  }

<div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</div>
<div>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
</div>

codepen to play with

在父八角形中整齐地插入八角形

Neatly Inset Octagon in Parent Octagon

html

css

css-shapes