tracez des lignes diagonales en arrière-plan div avec CSS

solution presque parfaite, qui passe automatiquement aux dimensions d'un élément serait l'utilisation de CSS3 linear-gradient connecté avec calc () comme indiqué ci-dessous. Le principal inconvénient est bien sûr la compatibilité. Code ci-dessous fonctionne dans Firefox 25 et Explorer 10 et 11, mais dans Chrome (j'ai testé V30 et V32 dev) Il ya quelques problèmes subtils avec les lignes qui disparaissent si elles sont trop étroites. De plus, la disparition dépend des dimensions de la boîte-style ci-dessous fonctionne pour div { width: 100px; height: 100px}, mais ne parvient pas pour div { width: 200px; height: 200px} pour qui dans mes tests 0.8px dans les calculs doit être remplacé au moins 1.1048507095px pour les diagonales à afficher et même alors la qualité de rendu ligne est assez mauvaise. Espérons que ce bug Chrome sera bientôt résolu.

.crossed {
    background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

vous pouvez utiliser SVG pour tracer les lignes.

.diag {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

<div class="diag" style="width: 300px; height: 100px;"></div>

Avoir un jeu ici: http://jsfiddle.net/tyw7vkvm

toutes les autres réponses à cette question vieille de 3 ans doivent être CSS3 (ou SVG). Cependant, il peut aussi être fait avec rien mais boiteux Vieux CSS2:

.crossed {
    position: relative;
    width: 300px;
    height: 300px;
}

.crossed:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    bottom: 1px;
    border-width: 149px;
    border-style: solid;
    border-color: black white;
}

.crossed:after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 0;
    bottom: 0;
    border-width: 149px;
    border-style: solid;
    border-color: white transparent;
}

<div class='crossed'></div>

Explication, comme l'a demandé:

plutôt que de dessiner des lignes diagonales, il m'est venu à l'esprit qu'on pouvait à la place colorer le soi-disant espace négatif triangles adjacents à l'endroit où nous voulons voir ces lignes. Le truc, je suis venu pour accomplir cette exploite le fait que les bordures multicolores CSS sont biseautées en diagonale:

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}

<div class='borders'></div>

pour que les choses s'adaptent comme nous le voulons, nous choisissons un rectangle intérieur avec des dimensions 0 et des pixels de LINE_THICKNESS, et un autre avec ces dimensions inversées:

.r1 { width: 10px;
      height: 0;
      border-width: 40px;
      border-style: solid;
      border-color: red blue;
      margin-bottom: 10px; }
.r2 { width: 0;
      height: 10px;
      border-width: 40px;
      border-style: solid;
      border-color: blue transparent; }

<div class='r1'></div><div class='r2'></div>

enfin, utilisez le :before et :after pseudo-sélecteurs et position relative / absolue comme un moyen soigné d'insérer les bordures des deux rectangles ci-dessus les uns sur les autres dans L'élément HTML de votre choix, pour produire une croix diagonale. Notez que les résultats semblent probablement les meilleurs avec une valeur fine de LINE_THICKNESS, telle que 1px.

s'il vous Plaît vérifiez les éléments suivants.

<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="mydiv"></div>

JS:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

CSS:

html, body { 
  margin: 0;
  padding: 0;
}

#myCanvas {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 100px;
}

#mydiv {
  position: absolute;
  left: 0px;
  right: 0;
  height: 102px;
  width: 202px;
  background: rgba(255,255,255,0);
  padding: 0;
  margin: 0;
}

jsfiddle

Vous pouvez utiliser une propriété CSS3 transform:

div
{
transform:rotate(Xdeg);
-ms-transform:rotate(Xdeg); /* IE 9 */
-webkit-transform:rotate(Xdeg); /* Safari and Chrome */
}

Xdeg = votre valeur

Par exemple...

Vous pouvez faire plus de div et utiliser une propriété z-index. Donc, faites une div avec line, et tournez-la.

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}

<div class='borders'></div>