如何用CSS clip-path polygon实现Canva风格多边形头部背景

我想用CSS的clip-path: polygon()属性制作类似Canva示例图的头部背景，不想直接插入图片，希望学习实现逻辑并添加CSS动画效果。尝试过程中遇到了div间距过大等问题，附上当前代码和目标效果截图，求解决方案。

目标效果 #

当前代码 #

CSS代码 #

body {
  font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1, 7;
  color: #777;
  padding: 30px;
}

.header {
  height: 80vh;
  background-image: radial-gradient(
    circle at 18.7% 37.8%,
    rgb(238, 226, 226) 0%,
    rgb(211, 219, 223) 90%
  );

  clip-path: polygon(100% 11%, 100% 77%, 0 100%, 0 0);
  backface-visibility: hidden;
  background-position: top;
  background-size: cover;
  color: black;
  position: relative;
  animation-name: movefromright;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
}

.image {
  background-image: url(img/logo2.png);
  height: 80vh;
  position: relative;
  background-size: cover;
  background-position: top;
  backface-visibility: hidden;
  animation-name: movefromleft;
  animation-duration: 1.7s;
  animation-timing-function: ease-out;
}

HTML代码 #

<body>
    <header class="header">
      <div class="image"></div>
      <div class="text-box">
        <div class="header-button">
          <a href="#zawartosc" class="btn btn-blue">Przejdź dalej</a>
        </div>
      </div>
    </header>

1. 解决div间距过大问题 #

当前.image是块级元素，默认占满一行导致和.text-box上下排列，产生多余间距。推荐用Flexbox实现左右分栏布局：

.header {
  /* 保留原有属性 */
  display: flex;
  align-items: center; /* 内部元素垂直居中 */
  overflow: hidden; /* 防止元素超出裁剪区域 */
}

.image {
  /* 保留原有属性 */
  flex: 1; /* 图片区域占头部一半宽度 */
  height: 100%; /* 继承头部高度，避免溢出 */
}

.text-box {
  flex: 1; /* 文字区域占另一半宽度 */
  padding: 0 50px; /* 避免文字贴边 */
}

2. 调整clip-path匹配目标形状 #

目标图是右下角斜切的效果，调整polygon参数更贴近需求：

.header {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

可通过修改百分比微调斜切角度，直到和目标图一致。

3. 补全动画关键帧 #

当前代码仅定义了动画名称，缺失关键帧导致动画不生效，补充如下：

@keyframes movefromright {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes movefromleft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

4. 修正语法错误 #

原代码中line-height: 1, 7是错误写法，需改为小数点形式：

body {
  /* 保留原有属性 */
  line-height: 1.7;
}

内容的提问来源于stack exchange，提问作者dododdo