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

-3

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

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

有没有更简单的方法？

2017-08-16 Ryan Hayden

我认为这并不容易.. – zynkn

在这个网站，你应该尝试**自己写代码**。后** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有问题，你可以**发布你已经尝试**与清楚的解释是什么是'工作**并提供一个** [最小，完整和可验证的示例]（// stackoverflow.com/help/mcve)** SO是一个提出可以回答，不讨论的问题的地方。 – Rob

最初认为没有任何CSS来支持它。为什么不生成第二个图像，将鸽尾切成透明png，并将第二个div浮动到负左边缘，以便与第一个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>

网上有很多发电机，以帮助创建的夹子 - 路径。

来源

2017-08-16 01:43:32

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

回答

相关问题