如何实现带完整边框的矩形+八边形组合形状（无旋转）

我需要制作一个带完整边框的矩形+八边形组合形状的容器，内部要承载多块内容，因此不能使用旋转元素的方式。目前查了不少资料和相关问题，试出来的效果都不对，下面是我用Sass写的代码：

现有HTML代码 #

<article>
    <div class='card__info--left'>
        <p>${data.origin.name}</p>
        <p>${data.location.name}</p>
        <p>${data.episode.length}</p>
    </div>
    <div class='card__info--img'>
        <img src='${data.image}' alt='${data.name}'>
    </div>
    <div class='card__info--right'>
        <h3>${data.name}</h3>
        <p>${data.status}</p>
        <p>${data.species}</p>
        <p>- ${data.type}</p>
        <p>${data.gender}</p>
    </div>
</article>

现有SCSS代码 #

article {
    margin: auto;
    display: grid;
    place-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: #c92b2b6e;
    height: 90vh;
    border-top: 10px solid #c92b2b;
    border-bottom: 10px solid #c92b2b;
    ::before{
        content: "";
        position: absolute;
        top: 34px;
        left: 214px;
        border-bottom: 29px solid transparent;
        border-right: 20px solid #c92b2b;
        border-top: 29px solid transparent;
        height: 84.5vh;
        width: 0;
    }
    ::after{
        content: "";
        position: absolute;
        top: 34px;
        right: 214px;
        border-bottom: 29px solid transparent;
        border-left: 20px solid #c92b2b;
        border-top: 29px solid transparent;
        height: 84.5vh;
        width: 0;
    }
}

解决方案：自适应边框实现方案 #

不用硬编码定位值，通过相对定位+线性渐变实现自适应的完整边框，同时保证内部内容布局不受影响：

article {
  position: relative;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background-color: #c92b2b6e;
  min-height: 90vh;
  border-top: 10px solid #c92b2b;
  border-bottom: 10px solid #c92b2b;
  padding: 20px;
  overflow: hidden;

  // 左侧斜边框
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: 
      linear-gradient(to bottom right, transparent 49%, #c92b2b 50%, #c92b2b 100%) top left/100% 50% no-repeat,
      linear-gradient(to top right, transparent 49%, #c92b2b 50%, #c92b2b 100%) bottom left/100% 50% no-repeat;
  }

  // 右侧斜边框
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: 
      linear-gradient(to bottom left, transparent 49%, #c92b2b 50%, #c92b2b 100%) top right/100% 50% no-repeat,
      linear-gradient(to top left, transparent 49%, #c92b2b 50%, #c92b2b 100%) bottom right/100% 50% no-repeat;
  }

  // 确保内部内容不被伪元素遮挡
  > div {
    position: relative;
    z-index: 1;
  }
}

关键改进点： #

• 容器设置position: relative，让伪元素基于容器定位，适配不同尺寸
• 用线性渐变绘制左右斜切边框，保证边框完整性和颜色统一
• 替换固定height为min-height，避免内容溢出时容器被截断
• 内部内容设置z-index:1，防止被伪元素遮挡
• 添加padding给内部内容留出间距，提升布局美观度

内容的提问来源于stack exchange，提问作者Krankesito