Visualizzazione dei risultati da 1 a 9 su 9

Discussione: Zig Zag top e bottom

  1. #1

    Zig Zag top e bottom

    Buonasera,
    sono riuscito a fare un box ZIG ZAG solo su BOTTOM, ma vorrei che apparisse anche sul TOP ma non ci riesco...

    Ecco il codice

    codice:
    <style>
       .zigzag_bianco {
          width: 100%;
          height: 500px;
          -webkit-mask-image: linear-gradient(0deg, transparent 12px, white 12px), linear-gradient(-135deg, white 7px, transparent 7px), linear-gradient(135deg, white 7px, transparent 7px);
          -webkit-mask-position: left bottom;
          -webkit-mask-repeat: repeat-x;
          -webkit-mask-size: 100% 100%, 12px 12px, 12px 12px;
          background: #FFFFFF;
       }
    </style>
    <div class=zigzag_bianco "></div>
    Come devo fare?
    Ultima modifica di KillerWorm; 06-11-2017 a 16:47 Motivo: tag code

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,996
    Quote Originariamente inviata da z.cristiano Visualizza il messaggio
    vorrei che apparisse anche sul TOP
    devi farne due diversi, con classi o identificativi diversi.

  3. #3
    Ma intendi il bordo o il background
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  4. #4
    Il background

  5. #5
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  6. #6
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    17,996
    scusate, non avevo capito la domanda

  7. #7
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    scusate, non avevo capito la domanda
    Sei perdonato
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  8. #8
    No no, vorrei che il zig zag visualizzasse sul top e sul bottom, quello che ho fatto io è solo sul bottom

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,677
    Salve, sul web trovi diversi metodi per fare ciò che chiedi.
    In alcuni esempi sono utilizzati gli pseudo-elementi ::before e ::after a cui sono applicate differentemente le proprietà background necessarie per creare quell'effetto:
    https://codepen.io/berky93/pen/hqBwv
    https://codepen.io/AndreiDodu/pen/gziqn

    In quest'altro esempio, a parte l'uso di due elementi HTML distinti (che credo siano sostituibili comunque con ::before e ::after), viene usato lo stesso effetto per entrambi ma, per uno di questi, vene applicato un ribaltamento in modo da far figurare correttamente il bordo a zig zag:
    http://jsfiddle.net/yKPe9/3/

    O ancora, in altri casi viene usata la proprietà border-image a cui è applicato un svg:
    https://codepen.io/atelierbram/pen/vrdKB

    Senza stare a reinventare la ruota, vedi se adeguando qualcosa di già pronto, come questi esempi, puoi ottenere il risultato richiesto.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.