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

Question

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

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

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 用于定义 polygon 元素中的形状。该属性由一个点列表组成。每个点必须有 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 链接：

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

Draw outline around custom polygon shape?

html

css

border

css-shapes