¿Alguna forma de limitar la longitud del borde?

216

¿Hay alguna manera de limitar la longitud de un borde? Tengo un <div>borde inferior, pero quiero agregar un borde a la izquierda del <div>que solo se extiende hasta la mitad.

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

css mcbeav
fuente

175

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>

Expandir fragmento

sObr
fuente

55

Esto todavía parece la mejor manera de hacerlo. Es compatible con varios navegadores y fácil de mantener.

Pim Schaaf

1

¿Hay alguna manera de hacer esto en un círculo?

www139

1

aplicar cuadro-sombra para círculo.

Piyush Dholariya

3

Esto puede tener beneficios marginales de compatibilidad cruzada entre navegadores antiguos y es más fácil de controlar a través de JS ... pero ninguna de estas son preocupaciones de la pregunta original. Sin embargo, esto agrega un elemento adicional al marcado que la pregunta original específicamente pide evitar. Entonces no entiendo por qué esta es la respuesta aceptada para esta pregunta.

Spencer O'Reilly

Hacer esto con: after no requerirá ningún marcado adicional

Mark

257

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>

Expandir fragmento

(nota: la content: "";declaración es necesaria para que el pseudo-elemento se procese)

TrevC
fuente

21

Creo que esto es semánticamente una opción mucho mejor, ya que no introduce divs adicionales.

Louis Otto

21

Esta debería ser la respuesta aceptada porque favorece CSS como único medio para diseñar sobre marcado.

Lukas

44

Perfecto. Y funciona como se esperaba con relleno y margen también.

Nolonar

44

Tenga en cuenta: no puede administrar propiedades de pseudoelementos de JS (en realidad sí puede, pero será muy hacky). Entonces, si planeas hacer una especie de barra de progreso con esta solución, olvídate. Elija la respuesta ya aceptada. En todos los demás casos, esta respuesta es mejor, eso es cierto.

Sergei Panfilov

2

¿Es este navegador cruzado y / o JS compatible? Prefiero la respuesta aceptada, debido al comentario de @ SergeyPanfilov.

matthaeus

36

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

Mostrar fragmento de código

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

Expandir fragmento

usuario2397120
fuente

1

¿Puedes agregar una muestra HTML? ¿Cómo crees usarlo con las celdas de la tabla, alguna pista?

Peter Krauss

21

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 el width/ heightde las imágenes creadas arriba para que se vea como un borde.
Uso background-positionde posición (como ajustar left, 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:

Mostrar fragmento de código

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

Expandir fragmento

Ejemplo con borde aplicado en dos lados:

Mostrar fragmento de código

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

Expandir fragmento

Ejemplo con borde aplicado en todos los lados:

Mostrar fragmento de código

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

Expandir fragmento

Captura de pantalla:

Mohammad Usman
fuente

14

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.

Edmhs
fuente

Sí, aquí "ancho" es la "longitud de la línea HR". Para algo como un ancho de borde, use el tamaño del atributo HR o CSS height. Para reemplazar el borde de la celda en una etiqueta TD, use <td>your content<hr/></td>.

Peter Krauss

8

Las fronteras se definen solo por lado, no en fracciones de un lado. Entonces, no, no puedes hacer eso.

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

Ben
fuente

7

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>

Expandir fragmento

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.

imagen de borde caniuse

Daniel Z.
fuente

5

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

Justin Munce
fuente

2

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.

Kevin
fuente

1

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

Simón
fuente

¿Alguna forma de limitar la longitud del borde?

Respuestas:

Con CSS (degradado lineal):