Css 为有角度的徽标创建无缝、可平铺的图像

这不是一个直接的编程问题，但它确实使用了一点数学和css，这已经困扰了我一段时间了

我的目标是创建一个有角度的徽标图像（将徽标旋转，比如35度），并使其可以平铺。我已经提到了，但我现在有点被困在第一阶段

所以说这是我的标志：

它不是很规则，因为它在左上角有一个小图标，并且它没有设置在一个固定大小的矩形内，所以它的边界不明显

我想，第一步是使其以当前形式可平铺。仅将css平铺规则应用于它的现状将导致类似的结果，这是不好的：

理想情况下，在旋转它之前，我们希望交替行被偏移，这样它就不那么像网格了

偏移量显然应为两个相邻徽标上相同点之间空间的50%。实现这一步的最佳方法是什么？我只是复制/粘贴并拖动它，直到它看起来正确吗？这不会那么准确。（使用photoshop）

然后，我需要确定作物面积，以便它无缝地重复

完成后，我就有了一个图像网格，现在我可以在photoshop中将其旋转到我想要的角度。困难将是获得正确的作物种植面积。然后我会参考上面的链接

增加的困难是确保我们有一个良好的水平标志种植面积大小。如果边的比率意味着我们有一个非常高的区域，那么我的旋转裁剪区域将是巨大而无意义的

---

总之，可靠设置水平网格以便获得尺寸合理（例如150 x 100 px）的裁剪区域的最佳方法是什么？

好的，经过一些艰苦的尝试后，我已经破解了它，但仅适用于45度旋转。如果有人能就如何计算其他角度的作物面积提供建议，我很感兴趣

• 因此，第一步是制作一个水平的徽标网格，就像问题中的最后一个示例一样。 要做到这一点，请将徽标放置在画布的左上角，然后裁剪画布，使徽标正好适合内部

• 接下来，如有必要，调整画布大小，使其接近所需图像的大小。在这个阶段，纵横比并不重要，我们只希望有一个可管理的图像大小。像250像素宽的东西是好的。这样做的结果很可能是另一条边有一个wierd维度。例如，250px宽x 78px高

• 现在，我们用空白填充徽标。这将有两个目的。首先要在徽标之间留出足够的空间，其次要获得良好的纵横比。这真的很重要。如果可能的话，尽量使画布的一条边是另一条边长度的1/2或1/3。这将帮助我们尽可能降低最低公倍数。调整画布大小时，请确保将实际徽标保留在画布的左上角，并从图像的右侧和底部填充

• 我们现在需要手动平铺图像，但也包括填充区域。如果我们只是照着原样复制，photoshop将忽略填充区域，只复制徽标本身。制作一个新图层，并将其与徽标图层一起放入图层文件夹中。用颜色填充这一层

• 现在制作一个新的photoshop文档。使画布的大小相当大；比如1000px 1000px

• 通过选择图层->复制，将刚创建的图层文件夹复制到此新文档，并选择新文档作为目标

• 现在通过复制并拖动图层来平铺此文件夹。首先向下拖动第一个副本，然后向右拖动。Photoshop通过将关键点处的图层捕捉到原始图层来帮助实现这一点。您会发现，当复制层的上边缘接触原始层的下边缘时，可以使其沿长度的一半进行捕捉，从而使其水平偏移

• 继续复制和捕捉到位，直到你已经用瓷砖覆盖了大画布

• 现在制作一个可以产生平铺图像的裁剪。获取选择工具并选择

  固定大小

  选项。输入一个像素大小，使选择成为正方形，边缘长度与原始图像的长度相同。也就是说，如果您的原始图像是150px 50px，那么您应该使您的裁剪尺寸为150px 150px

• 单击画布上的任意位置进行选择，将合并的文档复制到新文档中，您会发现您可以使用可平铺的图像，尽管带有水平徽标

• 现在旋转它。转到大平铺文档。按Ctrl-D键取消选择。编辑->将画布旋转45度

• 现在计算作物的大小。详情如下:

• 找到最小公倍数。因此，如果尺寸为150x50

  LCM=150

• 裁剪框的大小是使用直角三角形与LCM的其他边长度相等。也就是说，如果LCM=150，则L=sqrt（1502*1502）=212.12

• 现在对旋转的画布（任何地方都可以）进行大小为212（在本例中）的方形裁剪。这应该是一个平铺图像，你可以保存，调整大小，编辑等

这种方法对我很有效

正如我所说，任何计算其他角度的裁剪尺寸的方法都会有所帮助