Question

我正在尝试使用CSS而不是背景图片来制作弯曲边缘。

白色div位于灰色的顶部。当前，白色曲线是使用bg图像实现的。请帮助如何在没有背景图像的情况下实现上述设计？这样我就可以动态更改白色div的颜色。

Answer 1

您可以使用SVG格式使用它。首先，您可以使用Figma或Adobe Illustrator或任何您喜欢的形状进行绘制。您将该图像以SVG格式导入到代码中。在这种格式下，您可以编辑一行代码来操纵该形状的颜色。（SVG是作为代码导入的图像）。希望对您有所帮助。

Answer 2

<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

使用CSS制作弯曲边缘

2 个答案: