web-dev-qa-db-fra.com

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

J'ai un div pour une boîte de prévisualisation:

HTML:

<div class="preview-content">PREVIEW</div>

CSS:

.preview-content {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
     font-size: 2em;
}

Question: comment ajouter des lignes diagonales pour diviser le fond, comme sur la photo?

note: avec CSS seulement si possible

preview

Merci d'avance.

cssbackgroundlinecss-shapesdiagonal
42
Ing. Michal Hudak

Vous pouvez faire quelque chose comme ça:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

Voici un jsfiddle .

Version améliorée de réponse pour vos besoins.

25
AxelPAL

Une solution presque parfaite, qui s'adapte automatiquement aux dimensions d'un élément serait l'utilisation de CSS3 à gradient linéaire connecté à calc (), comme indiqué ci-dessous. Le principal inconvénient est bien sûr la compatibilité. Le code ci-dessous fonctionne dans Firefox 25 et Explorer 10 et 11, mais dans Chrome (j'ai déjà testé v30 et v32 dev), il existe quelques problèmes subtils de disparition des lignes si elles sont trop étroites. dépend des dimensions de la boîte - le style ci-dessous fonctionne pour div { width: 100px; height: 100px}, mais échoue pour div { width: 200px; height: 200px} pour lequel dans mes tests 0.8px dans les calculs doit être remplacé par au moins 1.1048507095px pour que les diagonales soient affichées et que même dans ce cas, la qualité du rendu des lignes est assez médiocre. Espérons que ce 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%);
}
<textarea class="crossed"></textarea>
91
RobertT

Vous pouvez utiliser SVG pour dessiner 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 une pièce de théâtre ici: http://jsfiddle.net/tyw7vkvm

18
intrepidis

Toutes les autres réponses à cette question vieille de 3 ans nécessitent CSS3 (ou SVG). Cependant, cela peut aussi être fait avec rien d'autre que le vieux CSS2 boiteux:

.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, à la demande:

Plutôt que de réellement dessiner des lignes diagonales, il m'est apparu que nous pouvions plutôt colorer les triangles dits espace négatif adjacents à l'endroit où nous voulons voir ces lignes. Le truc que j'ai trouvé pour accomplir cela exploite le fait que les bordures CSS multicolores 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 adapter les éléments à votre goût, nous choisissons un rectangle intérieur de dimensions 0 et LINE_THICKNESS pixels, ainsi qu'un autre rectangle dont les dimensions sont 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 positionnez relatif/absolu comme un moyen astucieux d’insérer les bordures des deux rectangles ci-dessus l'un sur l'autre dans l'élément HTML de votre choix pour former une croix diagonale. Notez que les résultats semblent probablement meilleurs avec une valeur LINE_THICKNESS mince, telle que 1px.

14
Will

S'il vous plaît vérifier les points 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

5
Saritha.S.R

vous pouvez utiliser une propriété de transformation CSS3:

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

Xdeg = votre valeur

Par exemple...

Vous pouvez créer plus de div et utiliser une propriété z-index. Alors, faites un div avec ligne et faites-le pivoter.

2
Reverter

réponse de Intrepidis sur cette page, l’utilisation d’un fichier SVG d’arrière-plan en CSS présente l’avantage de s’adapter parfaitement à n’importe quelle taille ou rapport de format, bien que le SVG utilise <path>si un remplissage qui s’échelonne moins bien.

Je viens de mettre à jour le code SVG pour utiliser <line> au lieu de <path> et ajouté non-scaling-strokeeffet vectoriel pour empêcher la mise à l'échelle des traits 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 ce qui est tombé dans le CSS de la réponse originale (avec HTML rendu redimensionnable):

.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;
}
<div class="diag" style="width: 200px; height: 150px; border: 1px solid; resize: both; overflow: auto"></div>
0
Shaw

Si vous souhaitez que la croix soit partiellement transparente, l'approche naïve serait de faire linear-gradient couleurs semi-transparentes. Mais cela ne fonctionne pas bien en raison du mélange alpha à l'intersection, produisant un diamant de couleur différente. La solution à cela est de laisser les couleurs unies mais d'ajouter de la transparence au conteneur de dégradé:

.cross {
  position: relative;
}
.cross::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.cross1::after {
  background:
    linear-gradient(to top left, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%);
}

.cross2::after {
  background:
    linear-gradient(to top left, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%);
  opacity: 0.35;
}

div { width: 180px; text-align: justify; display: inline-block; margin: 20px; }
<div class="cross cross1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

<div class="cross cross2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>
0
user