html 用svg缩放拉伸,html – 拉伸SVG以适应其父级的100％高度和宽度

最新推荐文章于 2025-07-21 13:06:01 发布

转载最新推荐文章于 2025-07-21 13:06:01 发布 · 1.4k 阅读

文章标签：

#html 用svg缩放拉伸

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

部署运行你感兴趣的模型镜像

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

您可能感兴趣的与本文相关的镜像