tracez des lignes diagonales dans le div de fond avec les CSS

Presque parfait solution, qui s'adapte 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 de la compatibilité. Le Code ci-dessous fonctionne dans Firefox 25 et Explorer 10 et 11, mais dans Chrome (j'ai testé v30 et v32 dev) il y a quelques problèmes subtils avec des lignes de disparaître si elles sont trop étroites. D'ailleurs en train de disparaître dépend des dimensions de la boite de style ci-dessous fonctionne pour div { width: 100px; height: 100px}, mais échoue pour div { width: 200px; height: 200px} pour laquelle, dans mes tests, 0.8px dans les calculs doit être remplacé au moins 1.1048507095px pour les diagonales d'être montré et même alors, la ligne de la qualité de rendu est assez pauvre. Espérons que ce n'est Chrome bug sera résolu bientôt.

CSS:

.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%);
}

HTML:

<textarea class="crossed"></textarea>

Toutes les autres réponses à cette enfant de 3 ans nécessitent CSS3 (ou SVG). Cependant, il peut également être fait avec rien, mais la lame vieux CSS2:

CSS:

.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;
}

HTML:

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

Explication, comme l'a demandé:

Plutôt que de réellement dessin de lignes diagonales, il m'est apparu que nous le pouvons, au lieu de la couleur de la 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 le multi-couleur CSS frontières sont biseautés en diagonale:

CSS:

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

HTML:

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

Pour rendre les choses s'adapter à la façon dont nous voulons, nous choisissons intérieure d'un rectangle avec des dimensions 0 et LINE_THICKNESS pixels, et une autre avec ces dimensions inversée:

CSS:

.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; }

HTML:

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

Enfin, l'utilisation de la :before et :after pseudo-sélecteurs et la position relative/absolue comme un moyen sympa pour insérer les frontières de ces deux rectangles l'un sur l'autre dans votre élément HTML de choix, pour produire une croix diagonale. Veuillez noter que les résultats probablement mieux avec un mince LINE_THICKNESS valeur, tels que 1px.

vous pouvez utiliser un CSS3 Propriété 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 de l'utilisation d'une propriété z-index.
Donc,faire une div avec la ligne, et le faire pivoter.

intrepidis réponse sur cette page à l'aide d'un fond de SVG dans le CSS a l'avantage de la mise à l'échelle joliment quelle que soit la taille ou l'aspect ratio, si le SVG utilise <path>s avec un fond qui n'est pas si bien.

J'ai juste mis à jour le code SVG à utiliser <line> au lieu de <path> et a ajouté non-scaling-stroke vecteur effet pour prévenir les coups de pinceau de mise à l'échelle avec le conteneur:

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'>
  <line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/>
  <line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/>
</svg>

Voici qui a chuté dans le CSS de l'original de la réponse (avec HTML effectuées redimensionnable):

CSS:

.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'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}

HTML:

<div class="diag" style="width: 200px; height: 150px; border: 1px solid; resize: both; overflow: auto"></div>