CSS3线穿过/介于元素之间

Question

我想在我的元素之间做一些交叉线来制作像页面一样的路线图。我不会解释很多，照片胜过千言万语。我希望通过像这张照片的元素来划线！

此外，我希望他们能够响应屏幕尺寸变化，而不仅仅是绝对图像。您认为如何实现这一目标？

注意：不需要IE支持。

Answer 1

以下是如何做一些对角线的快速示例：http://jsfiddle.net/wZD9K/

#line1{
        position:absolute;
        z-index:100;
        font-weight:bold;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg); /* IE 9 */
        -webkit-transform: rotate(-45deg); /* Safari and Chrome */
        -o-transform: rotate(-45deg); /* Opera */
        -moz-transform: rotate(-45deg); /* Firefox */
        top:50px;
        left:25px;
        padding:5px 10px 5px 10px;
        opacity:0.2;
        filter:alpha(opacity=20); /* For IE8 and earlier */
    }
#block1{
    border:5px solid red;
    z-index:200;
    width:200px;
    margin-top:50px;
}

- UPDATE-- 但是，如果您不必支持IE，那么请直接使用HTML5 canvas：http://jsfiddle.net/BHXru/

  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25,25);
    ctx.lineTo(105,25);
    ctx.lineTo(25,105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125,125);
    ctx.lineTo(125,45);
    ctx.lineTo(45,125);
    ctx.closePath();
    ctx.stroke();

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }

Answer 2

  

此外，我希望他们能够响应屏幕尺寸变化，而不仅仅是绝对图像。您认为如何实现这一目标？

img
{
  max-width:100%;
}

应该这样做。