脑洞：仅通过CSS和HTML能自动生成瓷砖地图的过渡规则吗？

Question

由这个话题延展而来。

游戏里面的瓷砖地图是指这样的东西，一些瓷砖在2D平面上排列，同时瓷砖和瓷砖在空间构型有关联的时候，会自动生成瓷砖之间的过渡。

比如说，我们有这样一些瓷砖（虚线不包含在瓷砖内容内，瓷砖内容就是这个白底菱形）：

1*1

它们水平并列或者垂直并列的时候，会自动“粘连”到一起（生成过渡）。

21, 31

1*2

如果这个CSS规则的生成足够自动，一个2*2的瓷砖并列应当是这样的：

2*2

当然我不是想要只用border-image就可以解决的问题啦，比如这样的不规则拼贴：

纯CSS可以很容易的做到水平或垂直中的一个方向上的自动过渡生成，但是两个方向同时生成呢？如何组织HTML呢？

假如不能，再使用上JS或CSS预编译语言呢？

Answer 1

呃……第一次被邀请，好荣幸。

不过对于这个话题，我想说是，如果是从CSS方面去考虑的话，那么必然少不了选择符的使用了。
但按照你这个情况来看，如果衔接之后，只有四个角是斜边的，那么可以考虑使用border-image来实现。

而如果是其他情况的话，那么还是需要使用:nth-child，根据每个位置的变化而改变。由于是四边相同的菱形，其实可以看成是一个正方形在四个角落的时候旋转了90°之后的变化。

再或者，由于这个图形的特性，其实可以看成是两个三角组成的菱形，那么可以用:before和:after来结合使用。

以上是我所想到的一点点思路，具体也没做demo什么的……

补充：
突然想到，菱形，四个角是三角，那么定位一下是不是就可以搞定了？

https://jsfiddle.net/pyegkqsr/

据说jsfiddle.net的链接可以直接看效果……

Answer 2

http://stackoverflow.com/questions/3659457/nine-patch-images-for-web-d...