Question

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

我正在使用div：before和：after pseudoclass ...

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＆＃39; polygon或path元素来创建上面的形状，并使用一些纯色，渐变或图案来描边/填充它。 / p>

只有一个属性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属性定义要填充的内部形状的颜色。

输出图片：

工作示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

有用的资源：

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

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

1 个答案: