带有形状的页脚

Question

如何制作具有两种不同形状的页脚？

结构为一节、四柱。

在 WordPress Elementor 中制作

我找不到任何有关此内容的 YouTube 教程:/// 我将不胜感激各位的帮助

在此输入图片描述

Answer 1

一些人工智能告诉我使用

skew

变换。圆度来自

border-radius

。至于剩下的，需要一点点摆弄，我就交给你了。

.parallelogram {
  width: 300px;
  height: 150px;
  transform: skew(-20deg);
  background-color: #522d5b;
  border-radius: 20px;
  overflow: hidden;
}

.content {
  /* unskew content */
  transform: skew(20deg);
  padding: 20px;
  color: white;
  text-align: center;
  height: 150px;
}

.flex-container {
  display: flex;
  gap: 20px;
  width: 550px;
  margin: auto;
  position: relative;
  left: -40px;
}

.outer-container {
  width: 460px;
  overflow: hidden;
  margin: auto;
  border: 1px solid red;
}

.blue {
  background-color: #00295d;
  flex-grow: 1;
}

.aqua {
  flex-grow: 3;
}

.aqua .content {
  background-image: url(https://picsum.photos/300/150);
  width: 300px;
  position: relative;
  left: -50px;
}

<div class="outer-container">
  <div class="flex-container">

    <div class="parallelogram blue">
      <div class="content">
        one column
      </div>
    </div>

    <div class="parallelogram aqua">
      <div class="content">
        3 columns column
      </div>
    </div>

  </div>
</div>