使用剪辑路径为透明div添加边框

Question

让我们考虑以下几点：

.hexagon {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(32,78,64,0.25);
            z-index: 20;
            /* -webkit-clip-path:  polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); */
            -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
            /*aspect-ratio: 1/cos(30deg);*/
            /*clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);*/
            clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

            /*             clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); */
            left:40px;
            top:40px;
            /*transform: rotate(90deg);*/

            display: flex;
            justify-content: center;
            align-items: center;
            
            /*filter: drop-shadow(1px 0px 0px rgba(32,78,64,1))
                    drop-shadow(-1px 0px 0px rgba(32,78,64,1))
                    drop-shadow(0px 1px 0px rgba(32,78,64,1))
                    drop-shadow(0px -1px 0px rgba(32,78,64,1))
                    drop-shadow(1px 1px 0px rgba(32,78,64,1))
                    drop-shadow(-1px -1px 0px rgba(32,78,64,1))
                    drop-shadow(-1px 1px 0px rgba(32,78,64,1))
                    drop-shadow(1px -1px 0px rgba(32,78,64,1));
                    */

            outline: 2px solid rgba(32,78,64,0.75);
            outline-offset: -2px;
        }

        .hexagon::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid black; /* Change color as needed */
            -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
            clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
            pointer-events: none;
            box-sizing: border-box; /* Ensures the border is included in the element's dimensions */
        }

挑战：

我需要沿着六边形剪辑路径添加边框。

尝试解决方案：

我上面使用的投影（已注释）在 Firefox 中不起作用。

现在，SO （示例）（这是我获得投影想法的地方）和互联网上有很多解决方案，但它们通常使用隐藏的、稍大的六边形，其边框颜色位于您需要的六边形下方去边境。就我而言，目标六边形是透明的，因此它不起作用。

此处的 after 伪元素仅添加一个针对原始未裁剪 div 的矩形边框。

我考虑过使用 SVG，但我不知道如何将 SVG 锚定到所有六边形 div，因为它们会通过调整大小事件并基于媒体查询来移动和更改大小。

问题：

如何向 div 添加 dark 边框，并使用透明背景 背景并应用剪辑路径？谢谢。

编辑：这是完整页面：Pastebin 链接

Answer 1

由于边框（以及阴影）被

<clip-path>

（或遮罩）剪切，您可能需要一个未剪切的环绕元素。

您可以使用 SVG

<polygon>

复制 CSS 剪辑路径，如下所示：

  <svg class="poly-brd full-width-height" viewBox="0 0 100 100" overflow="visible" preserveAspectRatio="none">
    <polygon points="25 0 75 0 100 50 75 100 25 100 0 50" stroke="blue" fill="none" vector-effect="non-scaling-stroke" />
  </svg>

对于填充父元素边界框的响应式多边形，我们需要将

preserveAspectRatio

设置为“none”。

vector-effect="non-scaling-stroke"

确保笔划保持统一的笔划宽度。另外我们申请

overflow="visible"

到 SVG 以确保边框不会被边界框裁剪。

body {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L10 0 L10 9' stroke-width='1' fill='none' stroke='%23eee'/></svg>");
  background-repeat: repeat;
  background-size: 10px;
}

.hexagon-brd {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 75vh;
}

.hexagon {
  background-color: rgba(200, 0, 0, 0.2);
  -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.poly-brd {
  stroke-width: 5px
}

.full-width-height {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="hexagon-brd">
  <svg class="poly-brd full-width-height" viewBox="0 0 100 100" overflow="visible" preserveAspectRatio="none">
    <polygon points="25 0 75 0 100 50 75 100 25 100 0 50" stroke="blue" fill="none" vector-effect="non-scaling-stroke" />
  </svg>

  <div class="hexagon full-width-height">
    <p>content</p>
  </div>
</div>