Question

我有一个3列父div，每个包含9个水平div，每个div都有一个固定的高度。有了三角学，这是我的最终结果，我对它很满意。

a busy cat http://www.colosio.com/final.png

左边的div用变换平移移动，右边的div被平移（和重叠）以便彼此靠近，中间的div用skewY函数变换。颜色是1px重复的背景图像。

现在的问题是，当旋转角度变宽时，我的老板对“拉伸”我的中间栏中的div感到不满意。

我尝试使用变换旋转，但不喜欢div重叠......

是否有一个简单或简单的方法来解决我的问题？干杯

编辑：演示链接 - http://www.intotheweb.org/cavi/

Answer 1

为了爱所有可爱的东西，请使用SVG！

SVG documentation

Polyline element

<svg width="600px" viewBox="-2 -2 220 100">
  <polyline fill="none" stroke="black" stroke-width="2" points="0 0, 20 0, 50 32, 70 32, 170 32, 200 0, 220 0" />
  <polyline fill="none" stroke="cornflowerblue" stroke-width="2" points="0 10, 20 10, 50 34, 70 34, 170 34, 200 10, 220 10" />
  <polyline fill="none" stroke="black" stroke-width="2" points="0 20, 20 20, 50 36, 70 36, 170 36, 200 20, 220 20" />
  <polyline fill="none" stroke="cornflowerblue" stroke-width="2" points="0 30, 20 30, 50 38, 70 38, 170 38, 200 30, 220 30" />
  <polyline fill="none" stroke="red" stroke-width="2" points="0 40, 20 40, 50 40, 70 40, 170 40, 200 40, 220 40" />
  <polyline fill="none" stroke="black" stroke-width="2" points="0 50, 20 50, 50 42, 70 42, 170 42, 200 50, 220 50" />
  <polyline fill="none" stroke="cornflowerblue" stroke-width="2" points="0 60, 20 60, 50 44, 70 44, 170 44, 200 60, 220 60" />
  <polyline fill="none" stroke="black" stroke-width="2" points="0 70, 20 70, 50 46, 70 46, 170 46, 200 70, 220 70" />
  <polyline fill="none" stroke="cornflowerblue" stroke-width="2" points="0 80, 20 80, 50 48, 70 48, 170 48, 200 80, 220 80" />
  <g class="main">
    <rect x="60" y="30" width="100" height="20" fill="black" stroke="none" />
    <text fill="white" stroke="none" x="72" y="44">SVG Image</text>
  </g>
</svg>

修复歪斜高度并尝试防止拉伸

1 个答案:

为了爱所有可爱的东西，请使用SVG！