Un modo per lunghezza limite di confine?

Question

C'è un modo per limitare la lunghezza di un confine. Ho un <div> che ha un bordo inferiore, ma voglio aggiungere un bordo a sinistra del <div> che solo estende la metà della salita.

C'è un modo per farlo senza l'aggiunta di ulteriori elementi sulla pagina?

Answer 1

Spero che questo aiuti:

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

Answer 2

contenuti CSS generato può risolvere questo per voi:

div {
  position: relative;
} 
/* Main div for border to extend to 50% from bottom left corner */
div:after {
  content:""; 
  background: black; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 50%; 
  width: 1px;
}

(nota - dichiarazione content: ""; è necessaria per lo pseudo-elemento di rendering)

Answer 3

Le rocce :after:)

Se si gioca un po 'si può anche impostare il vostro elemento confine ridimensionata ad apparire centrato o di apparire solo se v'è un altro elemento accanto ad essa (come nel menu). Ecco un esempio con un menu:

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}

#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}

<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Answer 4

  

Con la proprietà CSS, possiamo solo controllare lo spessore del bordo; Non lunghezza.

Tuttavia possiamo effetto frontiera mimica e controllare il suo width e height come vogliamo con altri modi.

Con i CSS (Linear Gradient):

Possiamo usare linear-gradient() per creare un'immagine di sfondo (s) e controllare la sua dimensione e la posizione con i CSS in modo che appaia come un confine. Come possiamo applicare più le immagini di sfondo ad un elemento, si può utilizzare questa funzione per creare confine più come immagini e applicare su lati diversi elementi. Siamo in grado di coprire anche l'area disponibile rimanente con un po 'di immagini a colori, sfumatura o solido background.

Obbligatorio HTML:

Tutti abbiamo bisogno è solo un elemento (possibilmente avere qualche classe).

<div class="box"></div>

Passi:

1. immagine di sfondo (s) Creare con linear-gradient().
2. Usa background-size per regolare la width / height di sopra di immagine creato (s) in modo che appaia come un confine.
3. Usa background-position per regolare la posizione (come left, right, left bottom etc.) dei suddetti confine creato (s).

Necessario CSS:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

Esempi:

Con linear-gradient() possiamo creare bordi di colore uniforme oltre ad avere pendenze. Di seguito sono riportati alcuni esempi di confine creati con questo metodo.

Esempio con bordo applicato su un solo lato:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}

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

  <div class="box gradient-border"></div>
</div>

Esempio con bordo applicato su due lati:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}

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

  <div class="box gradient-border"></div>
</div>

Esempio con bordo applicato su tutti i lati:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}

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

  <div class="box gradient-border"></div>
</div>

Cattura schermo:

Answer 5

per linee orizzontali è possibile utilizzare hr tag:

hr { width: 90%; }

, ma la sua non è possibile l'altezza limite di confine. solo altezza elemento.

Answer 6

I bordi sono definiti per lato solo, non in frazioni di lato. Quindi, no, non è possibile farlo.

Inoltre, un nuovo elemento non sarebbe un bordo o, sarebbe solo imitare il comportamento che si desidera -. Ma sarebbe comunque un elemento

Answer 7

Un altro modo per farlo è border-immagine utilizzando in combinazione con un gradiente lineare.

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

<div></div>

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

---

Supporto browser: IE: 11 +

Chrome:

Firefox: 15 +

Per un migliore supporto anche aggiungere prefissi vendor.

caniuse border-immagine

Answer 8

Questo è un trucco CSS, non una soluzione formale. Lascio il codice con il nero periodo perché mi aiuta a posizionare l'elemento. In seguito, il colore sul suo sito web (colore: bianco) e (margin-top: -5px o giù di lì). Per renderlo come se il periodo non è lì

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}

Answer 9

Un'altra soluzione è si potrebbe usare un'immagine di sfondo per imitare l'aspetto di un bordo sinistro

1. Crea lo stile del bordo-sinistra si richiede come grafico
2. Posizione è all'estrema sinistra del div (renderlo abbastanza a lungo per gestire circa due aumenti di dimensioni del testo per i vecchi browser)
3. Imposta la posizione verticale del 50% dalla parte superiore del vostro div.

Si potrebbe essere necessario modificare per IE (come al solito), ma ne vale la pena un colpo, se questo è il disegno che si sta andando per.

• Sono in genere contro l'uso di immagini di qualcosa che i CSS fornisce intrinsecamente, ma a volte se il disegno ha bisogno, non c'è altro modo intorno ad esso.

Answer 10

È possibile definire una frontiera per ogni unico lato. Si dovrebbe aggiungere un elemento in più per questo!