如果您对另一种选择开放,您可以使用纯CSS创建形状.它不会像SVG那样整洁,但它会响应：

* {

box-sizing:border-box;

}

.box {

margin:40px;

padding:0 10px;

max-width:200px;

display:inline-block;

vertical-align:top;

border-right:2px solid green;

border-left:2px solid green;

position:relative;

}

.box:before {

content:"";

position:absolute;

left:-2px;

right:-2px;

bottom:calc(100% - 40px);

height:50px;

border:2px solid green;

border-bottom:0;

border-radius:5px 5px 0 0;

transform:skewY(-5deg);

transform-origin:left bottom;

}

.box .b {

position:absolute;

left:-2px;

right:-2px;

top:calc(100% - 40px);

height:50px;

border:2px solid green;

border-top:0;

border-radius:0 0 5px 5px;

transform:skewY(5deg);

transform-origin:left top;

}

.box .b:before {

content:"";

position:absolute;

width:30px;

height:30px;

top:calc(100% - 15px);

left:40px;

border-left:2px solid green;

border-bottom:2px solid green;

transform:skewY(-45deg);

}

.box .b:after {

content:"";

position:absolute;

width:27px;

height:4px;

top:calc(100% - 1px);

background:#fff;

left:42px;

}

.box p {

margin:0;

}