html 用svg缩放拉伸,html – 拉伸SVG以适应其父级的100％高度和宽度-优快云博客

本文介绍了一种使用纯CSS创建形状并使其适应父级100％高度和宽度的方法，作为替代SVG的解决方案。通过CSS盒模型、定位、边框和变换属性，创建了响应式的图形元素，并给出了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果您对另一种选择开放,您可以使用纯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;

}

orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus. Ut viverra felis nec pretium accumsan. Sed eu ante id augue placerat pellentesque eget at nibh. Quisque pharetra nisi et suscipit eleifend

orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.

orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus.