我刚开始使用SVG图像,这是我第一次使用它们。我不是设计师或CSS动画专家,所以我使用了一个SVG波形生成器。在移动视口上,我的SVG图像底部出现了奇怪的边框,但在其他视口上没有这个问题。我无法正确解决这个问题。
这是我HTML中的SVG代码和我从生成器复制的CSS代码。感谢您的帮助!
.custom-shape-divider-bottom-1611177487 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
border: none !important;
stroke: transparent;
stroke-width: 0px;
}
.custom-shape-divider-bottom-1611177487 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
border: none !important;
stroke: transparent;
stroke-width: 0px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#2e38a4" fill-opacity="1" d="M0,160L48,165.3C96,171,192,181,288,197.3C384,213,480,235,576,250.7C672,267,768,277,864,261.3C960,245,1056,203,1152,197.3C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>