围绕自定义多边形形状绘制轮廓？

Question

CSS - 如何在 CSS 中为自定义形状制作边框，以便边框仅位于我的形状的外边缘（而不是现在在内部）？

我正在使用带有 :before 和 :after 伪类的 div...

https://codepen.io/RobotHabanera/pen/oGqwez

这是 CSS ：

  .nosce {
        box-sizing:border-box;
        position:relative;
        left:100px;
        top:100px;
        margin:0 auto;
        width:850px;
        height:570px;
        background:orangered; 
        border: dashed 2px #000;



    }

    .nosce:before {
        content:'';
        position:absolute;
        z-index:2;
        left:-57px;
        top:536px;
        width:545px;
        height:260px;
        background:orangered; 
        border: dashed 2px #000;          
    }

    .nosce:after {
        content:'';
        position:absolute;
        z-index:1;
        left:203px;
        bottom:-285px;
        width:285px;
        height:30px;
        background:orangered;
        border: dashed 2px #000;
    }  

Answer 1

SVG 是创建此类形状的推荐方法。它提供了简单性和可扩展性。

我们可以使用SVG 的polygon 或path 元素来创建一个像上面这样的形状，并用一些纯色、渐变或图案来描边/填充它。

points 元素中只有一个属性 points 用于定义形状。该属性由点列表组成。每个点必须有 2 个数字，一个 x 坐标和一个 y 坐标。自动从最后一点到起点画一条直线来闭合形状。

以下是创建此形状的必要代码：

<polygon points="55,5 55,450 5,450 5,820 260,820 260,850
                 550,850 550,570 855,570 855,5 55,5"
         fill="orangered" stroke="black" stroke-width="2" stroke-dasharray="8,4" />

下面是对上述代码的简要说明：

• points 属性定义了形状的结构。
• stroke 属性定义了轮廓/边框的颜色。
• stroke-width 定义轮廓/边框的粗细。
• stroke-dasharray 属性控制用于描边路径的破折号和间隙的模式。
• fill 属性定义要填充的内部形状的颜色。

输出图像：

工作示例：

svg {
  height: auto;
  width: 70%;
}

<svg width="900" height="855" viewBox="0 0 900 855">
  <polygon points="55,5 55,450 5,450 5,820 260,820 260,850 550,850 550,570 855,570 855,5 55,5" fill="orangered" stroke="black" stroke-width="2" stroke-dasharray="8,4" />
</svg>

有用的资源：

以下是一些有用的 SVG 链接：

• Specification
• MDN