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

由于内部 p 中有很好的填充，我们可以使用它并转到透明角落：

（需要调整几个尺寸）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

从您的问题中不清楚您究竟要求的是什么。但是如果你想要一个六边形边框并删除那些白色角落，那么你就是： -

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

母八边形中整齐地嵌入八边形

3 个答案: