Cualquier forma de longitud límite fronterizo?

Question

¿Hay alguna manera de limitar la longitud de un borde. Tengo un <div> que tiene un borde inferior, pero quiero añadir un borde a la izquierda de la <div> que sólo se extiende la mitad de su altura.

¿Hay alguna manera de hacerlo sin la adición de elementos adicionales en la página?

Answer 1

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>

Answer 2

CSS contenido generado puede resolver esto para 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 - la declaración content: ""; es necesaria para que el pseudo-elemento de render)

Answer 3

Las rocas :after:)

Si juegas un poco incluso se puede configurar el elemento de frontera redimensionada a aparecer centrada o para aparecer sólo si hay otro elemento al lado de él (como en los menús). He aquí 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;
}

<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Answer 4

  

Con las propiedades CSS, sólo podemos controlar el grosor del borde; no la longitud.

No obstante lo posible efecto frontera mímica y controlar su width y height como queremos con algunas otras maneras.

Con CSS (Gradiente Lineal):

puede utilizar linear-gradient() para crear una imagen de fondo (s) y controlar su tamaño y posición con CSS para que se vea como una frontera. Como podemos aplicar múltiples imágenes de fondo a un elemento, podemos utilizar esta función para crear múltiples frontera como imágenes y aplicar en diferentes lados del elemento. También podemos cubrir el área restante disponible con alguna imagen en color, degradado o de fondo sólido.

Obligatorio HTML:

Todo lo que necesitamos es un elemento solamente (posiblemente tiene cierta clase).

<div class="box"></div>

Pasos:

1. imagen de fondo (s) Crear con linear-gradient().
2. Uso background-size para ajustar el width / height de la imagen creada (s) para que se vea como una frontera.
3. Uso background-position para ajustar la posición (como left, right, left bottom etc.) 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 fronteras de color sólido, así como que tengan gradientes. A continuación se presentan algunos ejemplos de frontera creados con este método.

Ejemplo con la frontera aplica en un lado solamente:

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

Ejemplo con la frontera aplica en dos lados:

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

Ejemplo con la frontera aplica en todos los lados:

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

Captura:

Answer 5

para las líneas horizontales se puede utilizar la etiqueta hr:

hr { width: 90%; }

pero no es posible la altura límite fronterizo. solamente altura del elemento.

Answer 6

Borders se definen por lado solamente, no en fracciones de un lado. Así que no, no se puede hacer eso.

Además, un nuevo elemento no sería una frontera o bien, que lo haría solamente imitan el comportamiento que desea -., Pero aún así sería un elemento

Answer 7

Otra forma de hacer esto es la frontera-imagen usando en combinación con un lineal-gradiente.

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 para el navegador: IE: 11 +

Chrome: todos

Firefox: 15 +

Para un mejor soporte también añadir prefijos de proveedores.

caniuse frontera imagen

Answer 8

Este es un truco CSS, no una solución formal. Os dejo el código con el período de negro porque me ayuda a posicionar el elemento. Después, el color de su contenido (color: blanco) y (margin-top: -5px o algo así). Para que sea como si el tiempo no está allí

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

Answer 9

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

1. Crea el estilo de borde izquierda necesita como un gráfico
2. Posición a la izquierda de su muy div (que sea lo suficiente como para manejar aproximadamente dos aumenta el tamaño del texto para navegadores antiguos)
3. Establecer la posición vertical 50% de la parte superior de la div.

Es posible que tenga que modificar para IE (como de costumbre) pero vale la pena un tiro si ese es el diseño que usted está buscando.

• En general estoy contra el uso de imágenes por algo que CSS proporciona inherentemente, pero a veces si el diseño lo necesita, no hay otra manera alrededor de ella.

Answer 10

Se puede definir una frontera única por cada lado. Usted tendría que añadir un elemento extra por eso!