Bordo come separator

**sixdas** · 16-08-2014, 13:15

Salve, vorrei creare un bordo come separatore di. In pratica ho 3 div affiancati, ora vorrei dare un bordo destro a tutti e tre i modo da differenziare i div, ma vorrei che non fosse per tutta la sua altezza ma solo a metà. Posto un immagine cosi rende l'idea.

**cip999** · 16-08-2014, 15:38

Dunque, premetto che con i CSS sono alle prime armi, quindi spero di non dire troppe scemenze...

Comunque, una soluzione potrebbe essere quella di inserire all'interno di ciascuno dei tre <div> un altro <div>, dichiarato, ad esempio, con la classe "border", che ha la funzione di creare i bordi.
Questi tre <div> avranno un'altezza del 50% rispetto al box contenitore e saranno dichiarati relative, con uno spostamento del 25% dal margine superiore.

Ecco qui il contenuto dei CSS:

codice:

#container {
            width: 700px;
            height: 300px;
            margin: 10px; padding: 10px;
            background-color: #95D7EA;
            border: 1px solid #2363D7;
           }
div.box {
         float: left;
         width: 33%;
         height: 100%;
         margin: 0; padding: 0;
         background-color: #2363D7;
        }
div.border {
            position: relative;
            top: 25%;
            width: 100%;
            height: 50%;
            border-left: 2px solid black;
           }
div.box:first-child > div.border {
                                  border-left: none;
                                 }

E questo è il codice HTML:

codice HTML:

<div id="container">
  <div class="box">
    <div class="border"></div>
  </div>
  <div class="box">
    <div class="border"></div>
  </div>
  <div class="box">
    <div class="border"></div>
  </div>
</div>

**KillerWorm** · 16-08-2014, 17:24

Ciao, è valida l'idea di cip999 però la ottimizzerei maggiormente con l'uso del pseudo-elemento :after, in modo da non dover usare elementi aggiuntivi.

Un esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #container>div{
        position:relative;
        float:left;
        width:150px;
        height:100px;
        border:1px solid black;
      }
      #container>div+div{
        border-left:none;
      }
      #container>div+div:after{
        content:"";
        position:absolute;
        top:25%;
        left:-1px;
        background:red;
        width:1px;
        height:50%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
    </div>
  </body>
</html>

Discussione: Bordo come separator

Strumenti discussione

Ricerca discussione

Visualizza

Bordo come separator

Permessi di invio