Un modo per limitare la lunghezza del confine?

C’è un modo per limitare la lunghezza di un confine. Ho un

che ha un bordo inferiore, ma voglio aggiungere un bordo a sinistra di

che si estende solo per metà.

C’è un modo per farlo senza aggiungere elementi aggiuntivi nella pagina?

Spero che questo ti 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; } 
 

I contenuti generati dai CSS possono risolverlo per te:

 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: il content: ""; dichiarazione è necessaria per il rendering dello pseudo-elemento)

The :after rocks 🙂

Se giochi un po ‘puoi anche impostare il tuo elemento di bordo ridimensionato per apparire centrato o apparire solo se c’è un altro elemento accanto ad esso (come nei 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; } 
  

per le linee orizzontali puoi usare il tag hr:

 hr { width: 90%; } 

ma non è ansible limitare l’altezza del confine. solo altezza dell’elemento.

Con le proprietà CSS, possiamo controllare solo lo spessore del bordo; non lunghezza.

Tuttavia possiamo imitare l’effetto bordo e controllarne width e height come vogliamo con altri modi.

Con CSS (Linear Gradient):

Possiamo usare linear-gradient() per creare un’immagine di sfondo (s) e controllarne le dimensioni e la posizione con CSS in modo che assomigli a un bordo. Poiché possiamo applicare più immagini di sfondo a un elemento, possiamo usare questa funzione per creare più immagini come bordi e applicarle su diversi lati dell’elemento. Possiamo anche coprire l’area disponibile rimanente con alcune immagini a tinta unita, sfumate o di sfondo.

HTML richiesto:

Tutto ciò di cui abbiamo bisogno è un solo elemento (possibilmente avendo una class).

 

passi:

  1. Crea immagini di sfondo con linear-gradient() .
  2. Usa la background-size per regolare la width / height delle immagini create sopra in modo che assomigli a un bordo.
  3. Usa la background-position per regolare la posizione (come left , right , left bottom ecc.) Dei bordi creati sopra.

CSS necessario:

 .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 ie 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 tinta unita e avere sfumature. Di seguito sono riportati alcuni esempi di bordo creati con questo metodo.

Esempio con bordo applicato solo su un 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); } 
 

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

Inoltre, un nuovo elemento non sarebbe né un bordo, sarebbe solo imitare il comportamento che si desidera – ma sarebbe comunque un elemento.

Questo è un trucco CSS, non una soluzione formale. Lascio il codice con il punto nero perché mi aiuta a posizionare l’elemento. In seguito, colora il tuo contenuto (colore: bianco) e (margine-top: -5px o giù di lì) per renderlo come se il punto non fosse lì.

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

Un’altra soluzione è che potresti usare un’immagine di sfondo per imitare l’aspetto di un bordo sinistro

  1. Crea lo stile border-left che desideri come immagine
  2. Posizionalo all’estrema sinistra del tuo div (rendilo abbastanza lungo da gestire all’incirca due aumenti della dimensione del testo per i browser più vecchi)
  3. Imposta la posizione verticale del 50% dalla parte superiore del div.

Potrebbe essere necessario modificare per IE (come al solito), ma vale la pena sparare se questo è il design che stai per.

  • Generalmente sono contrario all’uso delle immagini per qualcosa che il CSS fornisce intrinsecamente, ma a volte, se il design ne ha bisogno, non c’è altro modo.

Un altro modo per farlo è usare l’immagine del bordo 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; } 
 

È ansible definire un bordo solo per lato. Dovresti aggiungere un elemento in più per questo!