CSS 定位页脚元素（波形图像和内容）

Question

我想使用 React JS 制作这样的页脚

到目前为止，这是我的代码

const Footer = () => {
  return (
    <>
      <div className="footer-wave">
        <Image
          src={require("../assets/images/wave.png").default}
          className="img-fluid"
        />
      </div>
      <div className="footer-wrapper">
        <div className="footer">
          <div className="footer1">
            <ul>
              <li>Legal Notice</li>
              <li>Terms of Use</li>
              <li>Confidentiality</li>
              <li>Contact Us</li>
            </ul>
          </div>
          <div className="footer2">
            <ul>
              <li>Subscribe</li>
              <li>Secure Payment</li>
              <li>Content Directly on Your Browser</li>
              <li>Guaranteed Quality Creation</li>
              <li>Customer Service</li>
              <li>FAQ</li>
            </ul>
          </div>
          <div className="footer3">
            <p>Follow Us</p>
            <ul>
              <li>Instagram</li>
              <li>Youtube</li>
              <li>Twitter</li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
};

export default Footer;

CSS

.footer-wrapper {
    background-color: #270327;
}

.footer {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer li {
    margin-bottom: 10px;
}

输出：

我认为这里定位元素可以完成工作，但我试过我没有得到想要的输出。任何人都可以提出建议吗？我是 CSS 定位新手！任何帮助将不胜感激！

供参考的波形图：

Answer 1

我怎么看波浪图不是很合适底部直收。所以最好的方法是使用具有适当尺寸的 Photoshop。您可以在这里缩小页脚和图像之间的差距，通过 css.

旋转一点

.img-fluid {
  transform: rotate(10deg);
}

要使图像和页脚之间的闭合距离最近，您必须将其他值设置为 10 度。

CSS 定位页脚元素（波形图像和内容）

CSS positioning footer elements (wave image and content)

html

css

css-position

reactjs

responsive