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

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 链接:

• Specification
• MDN