如何使用CSS创建燕尾背景?
问题描述:
所以客户给了我这个设计。当点击不同的木纹选项时,背景应该会改变 - 很容易。我挠头的部分是燕尾中间的部分?这不是一个简单的问题。
我想知道你将如何处理这个问题。现在我正在考虑使用CSS Grid并尝试垂直居中木纹背景图像并将它们对齐。然后我会把div放在中间。
有没有更简单的方法?
答
您可以使用clip-path和负利润率达到燕尾
粗糙的工作例如:
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
}
<div></div>
<div></div>
网上有很多发电机,以帮助创建的夹子 - 路径。
我认为这并不容易.. – zynkn
在这个网站,你应该尝试**自己写代码**。后** [做更多的研究](//meta.*.com/questions/261592)**如果你有问题,你可以**发布你已经尝试**与清楚的解释是什么是'工作**并提供一个** [最小,完整和可验证的示例](// *.com/help/mcve)** SO是一个提出可以回答,不讨论的问题的地方。 – Rob
最初认为没有任何CSS来支持它。为什么不生成第二个图像,将鸽尾切成透明png,并将第二个div浮动到负左边缘,以便与第一个div重叠。你将不得不增加左边距以适应负边距。 –