如何解决使用CSS制作弯曲边缘
我正在尝试使用CSS而不是背景图片来制作弯曲边缘。
白色div位于灰色的顶部。当前,白色曲线是使用bg图像实现的。请帮助如何在没有背景图像的情况下实现上述设计?这样我就可以动态更改白色div的颜色。
解决方法
您可以使用SVG格式使用它。首先,您可以使用Figma或Adobe Illustrator或任何您喜欢的形状进行绘制。您将该图像以SVG格式导入到代码中。在这种格式下,您可以编辑一行代码来操纵该形状的颜色。 (SVG是作为代码导入的图像)。希望对您有所帮助。
,<div class="a1"></div>
<style type="text/css">
.a1 {
height: 136px;
background: red;
position: relative;
width:100%;
}
.a1:after {
content: '';
position: absolute;
top: 99px;
right: -64px;
border-top: 110px solid white;
border-left: 850px solid white;
width: 0;
background: #fff;
border-radius: 100px;
}
.a1:before {
content: '';
position: absolute;
top: 116px;
left: 0px;
width: 329px;
height: 91px;
background: #f00;
border-radius: 0px 0px 328px 0px;
}
</style>
[1]: https://i.stack.imgur.com/tN360.jpg
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。