Qualche modo per limitare la lunghezza del bordo?
Risposte:
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;
}<div id="mainDiv">
<div id="borderLeft"></div>
</div>Il contenuto generato da CSS può 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;
}<div>Lorem Ipsum</div>(nota: la content: "";dichiarazione è necessaria per il rendering dello pseudo-elemento)
Il :after rocce :)
Se giochi un po 'puoi persino impostare il tuo bordo ridimensionato in modo che appaia centrato o appaia solo se c'è un altro elemento accanto (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;
}Con le proprietà CSS, possiamo controllare solo lo spessore del bordo; non lunghezza.
Tuttavia, possiamo imitare l'effetto bordo e controllare il suo widtheheight come vogliamo in altri modi.
Con CSS (gradiente lineare):
Possiamo usare linear-gradient() per creare un'immagine di sfondo e controllarne le dimensioni e la posizione con CSS in modo che appaia come un bordo. Poiché possiamo applicare più immagini di sfondo a un elemento, possiamo usare questa funzione per creare più bordi come immagini e applicare su diversi lati dell'elemento. Possiamo anche coprire l'area disponibile rimanente con un colore uniforme, sfumatura o immagine di sfondo.
HTML richiesto:
Tutto ciò di cui abbiamo bisogno è un solo elemento (possibilmente con qualche classe).
<div class="box"></div>passi:
- Crea immagini di sfondo con
linear-gradient(). - Utilizzare
background-sizeper regolare l'immaginewidth/ leheightimmagini sopra create in modo che appaia come un bordo. - Utilizzare
background-positionper regolare la posizione (comeleft,right,left bottometc.) dei suddetti confine creato (s).
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 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 solido oltre ad avere sfumature. Di seguito sono riportati alcuni esempi di bordi creati con questo metodo.
Esempio con bordo applicato solo su un lato:
Esempio con bordo applicato su due lati:
Esempio con bordo applicato su tutti i lati:
Immagine dello schermo:
per le linee orizzontali puoi usare il tag hr:
hr { width: 90%; }ma non è possibile limitare l'altezza del bordo. solo altezza elemento.
height. Per sostituire il bordo della cella in un tag TD usare <td>your content<hr/></td>.
Un altro modo per farlo è usare l'immagine di confine 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: tutti
Firefox: 15+
Per un supporto migliore aggiungi anche i prefissi del fornitore.
Questo è un trucco CSS, non una soluzione formale. Lascio il codice con il punto nero perché mi aiuta a posizionare l'elemento. Successivamente, colora il tuo contenuto (colore: bianco) e (margine superiore: -5px circa) per renderlo come se il periodo 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
- Crea lo stile del bordo sinistro richiesto come elemento grafico
- 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)
- Imposta la posizione verticale del 50% dalla parte superiore del div.
Potrebbe essere necessario modificare IE (come al solito), ma vale la pena provare se è questo il design che stai cercando.
- In genere sono contrario all'utilizzo delle immagini per qualcosa che CSS fornisce intrinsecamente, ma a volte se il design ne ha bisogno, non c'è altro modo per aggirarlo.