¿Alguna manera de limitar la longitud del borde?

¿Hay alguna manera de limitar la longitud de un borde? Tengo un

que tiene un borde inferior, pero quiero agregar un borde a la izquierda del

que solo se extiende hasta la mitad del camino.

¿Hay alguna manera de hacerlo sin agregar elementos adicionales en la página?

Espero que esto ayude:

 #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; } 
 

El contenido generado por CSS puede resolverlo por usted:

 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: el content: ""; statement es necesaria para que se muestre el pseudo-elemento)

The :after rocks 🙂

Si juegas un poco, incluso puedes configurar tu elemento de borde redimensionado para que parezca centrado o para que aparezca solo si hay otro elemento al lado (como en los menús). Aquí hay un ejemplo con un menú:

 #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; } 
  

para las líneas horizontales puedes usar la etiqueta hr:

 hr { width: 90%; } 

pero no es posible limitar la altura del borde. solo altura del elemento.

Con las propiedades CSS, solo podemos controlar el grosor del borde; no longitud

Sin embargo, podemos imitar el efecto de borde y controlar su width y height como deseamos con otras formas.

Con CSS (Gradiente lineal):

Podemos usar linear-gradient() para crear una imagen de fondo y controlar su tamaño y posición con CSS para que parezca un borde. Como podemos aplicar múltiples imágenes de fondo a un elemento, podemos usar esta función para crear múltiples imágenes similares a los bordes y aplicarlas en diferentes lados del elemento. También podemos cubrir el área restante disponible con un poco de color sólido, degradado o imagen de fondo.

HTML requerido:

Todo lo que necesitamos es un solo elemento (posiblemente teniendo alguna clase).

 

Pasos:

  1. Crear imágenes de fondo con linear-gradient() .
  2. Utilice background-size para ajustar el width / height de las imágenes creadas anteriormente para que se vean como un borde.
  3. Use background-position para ajustar la posición (como left , right , left bottom , left bottom etc.) del borde (s) creado anteriormente.

CSS necesario:

 .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; } 

Ejemplos:

Con linear-gradient() podemos crear bordes de color sólido y degradados. A continuación se muestran algunos ejemplos de bordes creados con este método.

Ejemplo con borde aplicado solo por un lado:

 .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); } 
 

Los bordes se definen por lado solamente, no en fracciones de un lado. Entonces, no, no puedes hacer eso.

Además, un elemento nuevo tampoco sería un borde, solo imitaría el comportamiento que desea, pero aún así sería un elemento.

Este es un truco de CSS, no una solución formal. Dejo el código con el período negro porque me ayuda a ubicar el elemento. Después, colorea tu contenido (color: blanco) y (margen superior: -5px más o menos) para que parezca que el período no está allí.

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

Otra solución es que podría usar una imagen de fondo para imitar el aspecto de un borde izquierdo

  1. Cree el estilo de borde izquierdo que necesita como gráfico
  2. Colóquelo a la izquierda de su div (haga que sea lo suficientemente largo como para manejar aproximadamente dos aumentos de tamaño de texto para navegadores antiguos)
  3. Establezca la posición vertical al 50% desde la parte superior de su div.

Es posible que necesite modificar IE (como de costumbre) pero vale la pena intentarlo si ese es el diseño que está buscando.

  • En general, estoy en contra de usar imágenes para algo que CSS proporciona inherentemente, pero a veces, si el diseño lo necesita, no hay otra forma de evitarlo.

Otra forma de hacerlo es usar border-image en combinación con un gradiente lineal.

 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; } 
 

Puede definir un borde por lado solamente. ¡Tendría que agregar un elemento extra para eso!