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

j'ai div pour preview box

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

Q: Comment ajouter des lignes diagonales à div background comme dans l'image

note: avec CSS seulement si possible

preview

Merci d'avance

32
demandé sur web-tiki 2013-08-02 12:41:21

7 réponses

Vous pouvez faire quelque chose comme ceci:

<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 votre but.

24
répondu AxelPAL 2017-05-23 12:02:56

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%);
}
71
répondu RobertT 2013-11-07 23:05:54

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

15
répondu intrepidis 2018-10-05 18:52:04

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.

13
répondu Will 2017-04-16 17:53:16

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

5
répondu Saritha.S.R 2013-08-02 08:49:02

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.

0
répondu Reverter 2013-08-02 08:46:59

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}
<div class='borders'></div>
-1
répondu Khusir ALam 2017-08-30 08:28:04