disegnare linee diagonali in div sfondo con i CSS

Ho un div per la finestra di anteprima:

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

Domanda: come aggiungere le linee diagonali per div sfondo come in foto?

nota: con i CSS solo se possibile

disegnare linee diagonali in div sfondo con i CSS

Vi ringrazio in anticipo.

  • Si vuole solo aggiungere due righe?
  • sì, solo 2 come in foto

 

9 Replies
  1. 25

    Si può fare qualcosa di simile a questo:

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

    Qui è un jsfiddle.

    Versione migliorata di risposta per il tuo scopo.

    • la larghezza del blocco non è permanente, avviso width: 100%;
    • Con -webkit-transform funziona solo su browser basato su WebKit. Suggerisco di specificare gli standard W3C transform regola come primo passo, quindi specificare le altre specifiche del browser regola, ad -webkit-transform, -moz-transform, -ms-transform, -o-transform.
  2. 88

    Quasi perfetta soluzione, che ridimensiona automaticamente le dimensioni di un elemento sarebbe l’utilizzo di CSS3 gradiente lineare collegato con calc (), come mostrato di seguito. Svantaggio principale è naturalmente la compatibilità. Il codice riportato di seguito funziona in Firefox 25 e Explorer 10 e 11, ma in Chrome (l’ho provato v30 e v32 dev) ci sono alcuni piccoli problemi con le linee di scomparire se sono troppo stretti. Inoltre scomparendo dipende dalle dimensioni della scatola – stile di sotto di opere per div { width: 100px; height: 100px}, ma non per div { width: 200px; height: 200px} per cui nel mio test 0.8px nei calcoli, deve essere sostituita con almeno 1.1048507095px per le diagonali per essere mostrato, e anche allora la linea di rendering qualità è abbastanza scarsa. Speriamo che questo bug di Chrome sarà presto risolto.

    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>

    • Migliore soluzione per CSS3 (y)
    • Accidenti. Si sta bene.
    • Ecco una jsfiddle nel caso in cui si desidera giocare con questa soluzione: jsfiddle.net/zaxy6pmn
    • Appare per lo più su OK in Chrome 39, ma inferiore destro “braccio” ha un extra di pixel. A seconda di cosa c’è intorno a questo potrebbe non essere evidente, tranne a dimensioni molto piccole, ad esempio, di 5×5 pixel.
    • Un po ‘ sfocata in Firefox 37 e nessun supporto per gradiente lineare in IE9 (può essere in grado di utilizzare ms-filter però)
    • Solo per dire, questo non funziona in Safari
    • Bella soluzione. Aggiornato a sfondo ripetere: jsfiddle.net/6q4m4ww8 il Mio problema, ora, è come aggiungere una distanza tra x-es
    • Vuoi dire qualcosa come http://jsfiddle.net/8f5rgn8t/? 😉 (anche se probabilmente bisogno di un po ‘ più di tweaking per linee più spesse, come ogni linea ha una estremità tagliate in verticale a lato del riquadro di delimitazione e la seconda per l’orizzontale)

  3. 18

    È possibile utilizzare il formato SVG per disegnare le linee.

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

    HTML:

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

    Hanno un gioco qui: http://jsfiddle.net/tyw7vkvm

    • Bello! Era alla ricerca di una soluzione per emulare un “barrato” il prezzo e questo ha funzionato alla grande con un paio di modifiche minori jsfiddle.net/tyw7vkvm/636 👍
  4. 14

    Tutte le altre risposte 3-anno-vecchio questione richiedono CSS3 (SVG). Tuttavia, può anche essere fatto con niente, ma zoppo vecchio 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>

    Spiegazione, come richiesto:

    Piuttosto che in realtà il disegno di linee diagonali, si è verificato a me non si possono, invece, il colore, il cosiddetto spazio negativo triangoli adiacenti al luogo in cui vogliamo vedere queste linee. Il trucco mi è venuta per realizzare questo sfrutta il fatto che i multi-colored CSS bordi sono smussati in 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>

    Per fare le cose per il modo in cui si vuole, si può scegliere un rettangolo interno con dimensioni 0 e LINE_THICKNESS pixel, e un altro con quelle dimensioni invertito:

    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>

    Infine, utilizzare il :before e :after pseudo-selettori e la posizione relativa e assoluta, come un modo pulito per inserire i confini di entrambi i rettangoli sulla parte superiore di ogni altro nel tuo HTML elemento di scelta, per produrre un diagonale incrociato. Nota che i risultati probabilmente un aspetto migliore con un sottile LINE_THICKNESS valore, come 1px.

    • Haha beh, credo che una spiegazione potrebbe essere grande qui, perché sembra una strana magia voodoo in un primo momento.
    • Fatto. Fatemi sapere se un ulteriore chiarimento è necessario.
    • Impressionante spiegazione e, infatti, un genio soluzione. +1
    • Sì, bel trucco, ma ignora una ipotesi di domanda originale: width: 100% di div incrociate 😉 anche Se, ad essere onesti, indovinando dalla accettati risposta, sembra che non è stato difficile requisito.
  5. 5

    Si prega di controllare il seguente.

    <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

    • si noti che la larghezza è al 100%, width: 100%; così casella sarà mobile, e quindi non posso scrivere le coordinate permanente in js
  6. 2

    è possibile utilizzare un CSS3 Proprietà di trasformazione:

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

    Xdeg = valore

    Per esempio…

    Si può fare di più div e l’uso di una proprietà z-index.
    Quindi,fare un div con la linea, e ruotare.

  7. 0

    Se desideri croce per essere parzialmente trasparente, l’approccio più semplice sarebbe fare linear-gradient colori semi-trasparenti. Ma che non funziona bene a causa del alpha blending all’incrocio, la produzione di un diverso colore del diamante. La soluzione a questo è quello di lasciare i colori solidi, ma aggiungere trasparenza al gradiente contenitore invece:

    CSS:

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

    HTML:

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

  8. 0

    intrepidis’ la risposta su questa pagina utilizzando uno sfondo SVG nel CSS ha il vantaggio di scala bene a qualsiasi dimensione o il rapporto di aspetto, anche se il SVG utilizza <path>s con un riempimento che non scala bene.

    Ho appena aggiornato il codice SVG utilizzare <line> invece di <path> e aggiunto non-scaling-stroke vector-effetto per evitare i colpi di scala con il contenitore:

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

    Ecco che è sceso in CSS originale risposta (con HTML fatto ridimensionabile):

    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>

  9. -3

    .borders {
        width: 200px;
        height: 100px;
        background-color: black;
        border-width: 40px;
        border-style: solid;
        border-color: red blue green yellow;
    }
    <div class='borders'></div>

Lascia un commento