¿Alguna forma de limitar la longitud del borde?
Respuestas:
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;
}<div id="mainDiv">
<div id="borderLeft"></div>
</div>El contenido generado por CSS puede resolver esto 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;
}<div>Lorem Ipsum</div>(nota: la content: "";declaración es necesaria para que el pseudo-elemento se procese)
Las :afterrocas :)
Si juega un poco, incluso puede configurar su elemento de borde redimensionado para que aparezca 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;
}Con las propiedades CSS, solo podemos controlar el grosor del borde; no longitud
Sin embargo, podemos imitar el efecto de borde y controlarlo widthy, heightcomo queremos, con otras formas.
Con CSS (degradado 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 bordes como imágenes y aplicarlas en diferentes lados del elemento. También podemos cubrir el área disponible restante con algo de color sólido, degradado o imagen de fondo.
HTML requerido:
Todo lo que necesitamos es un solo elemento (posiblemente teniendo alguna clase).
<div class="box"></div>Pasos:
- Crea imágenes de fondo con
linear-gradient(). - Use
background-sizepara ajustar elwidth/heightde las imágenes creadas arriba para que se vea como un borde. - Uso
background-positionde posición (como ajustarleft,right,left bottometc.) de los anteriores frontera creada (s).
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 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;
}Ejemplos:
Con linear-gradient()podemos crear bordes de color sólido, así como tener gradientes. A continuación se muestran algunos ejemplos de bordes creados con este método.
Ejemplo con borde aplicado solo en un lado:
Ejemplo con borde aplicado en dos lados:
Ejemplo con borde aplicado en todos los lados:
Captura de pantalla:
para líneas horizontales puede usar la etiqueta hr:
hr { width: 90%; }pero no es posible limitar la altura del borde. solo altura del elemento.
height. Para reemplazar el borde de la celda en una etiqueta TD, use <td>your content<hr/></td>.
Otra forma de hacerlo es usar la imagen de borde en combinación con un degradado 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;
}<div></div>jsfiddle: https://jsfiddle.net/u7zq0amc/1/
Soporte de navegador: IE: 11+
Chrome: todos
Firefox: 15+
Para un mejor soporte también agregue prefijos de proveedor.
Este es un truco CSS, no una solución formal. Dejo el código con el punto negro porque me ayuda a posicionar el elemento. Luego, 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
- Cree el estilo de borde izquierdo que necesita como gráfico
- Colóquelo a la izquierda de su div (hágalo lo suficientemente largo como para manejar aproximadamente dos aumentos de tamaño de texto para navegadores antiguos)
- Establece la posición vertical al 50% desde la parte superior de tu div.
Es posible que deba ajustar para IE (como de costumbre), pero vale la pena intentarlo si ese es el diseño que está buscando.
- Generalmente estoy en contra del uso de imágenes para algo que CSS proporciona inherentemente, pero a veces si el diseño lo necesita, no hay otra forma de evitarlo.