html - 用css绘制不规则形状(应该是响应式的)

Question

有什么方法可以用 css 绘制形状(下图)？灰色边框样式应为虚线。 最重要的是它应该是响应式(应该适应不同半径的不同尺寸的屏幕)。

坏例子(没有响应):

#box {
    position: relative;
    margin: 30px;
    width: 200px;
    height: 100px;
    background: #fff;
    border: 1px dashed #333;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px dashed #333;
    background-color: #fff;
}

.top-left {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}

<div id="box">
    <div class="corner top-left"></div>
</div>

Answer 1

我的建议是使用 SVG。这就是它的用途。这是一个例子...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" viewBox="0 0 256 128" enable-background="new 0 0 256 128" xml:space="preserve">
    <path fill="#FFFFFF" stroke="#828282" stroke-dasharray="10" stroke-width="5" d="M249.75,121h-242V64c0,0,56.5,4.75,56.5-56.5h185.5V121z" />
</svg>

fiddle :https://jsfiddle.net/6r0hhfsh/