如何使用CSS创建燕尾背景？

Question

所以客户给了我这个设计。当点击不同的木纹选项时，背景应该会改变 - 很容易。我搔脑的部分是燕尾的中间部分？这不是一个容易的问题。

我想知道你将如何处理这个问题。现在我正在考虑使用CSS Grid并尝试垂直居中木纹背景图像并将它们对齐。然后我会在中间堆叠div。

有更简单的方法吗？

Answer 1

您可以使用clip-path和负边距来实现燕尾

粗略的工作示例：

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 200px;
  display: inline-block;
}

div:nth-of-type(1) {
  background: darkred;
  clip-path: polygon(0% 15%, 0 0, 15% 0%, 85% 0%, 85% 40%, 95% 30%, 95% 70%, 85% 63%, 85% 100%, 15% 100%, 0 100%, 0% 85%);
}

div:nth-of-type(2) {
  background: green;
  margin-left: -2.5em
}

＆＃13;

<div></div>
<div></div>

＆＃13;

＆＃13;

＆＃13;

有很多在线生成器可以帮助创建剪辑路径。