Quiero que el borde izquierdo de mi div se muestre solo en la mitad del div. Lo mismo me gustaría hacer a mi borde derecho, pero debe establecerse desde la parte inferior del div hasta el medio del div. ¿Cómo puedo lograrlo?css border-left 50% height
Buena pregunta. No es posible usar la propiedad del borde.
Lo único que se le viene a la mente, si puede establecer su div position en relative, es utilizar un div completamente posicionado de 1 píxel de ancho. No probado a fondo, pero esto debe trabajo:
<div style='width: 1px; top: 0px; bottom: 50%; left: 0px;
background-color: blue; overflow: hidden'>
</div>
Usted haría lo mismo en el lado derecho, en sustitución de la propiedad left por right.
Recuerde que la rodea div es necesario que haya position: relative para que esto funcione. No estoy seguro de si la configuración de altura del 50% funcionará de manera consistente en todos los navegadores, asegúrese de probarla. Puede que tenga que recurrir a medidas de píxeles si no es así.
realmente sorprendente, eso es lo que estoy buscando ... –
Una especie de enfoque similar pero diferente a @ Pekka de: utilizar el pseudo-selector de :after, así:
Formato HTML:
<div class="mybox">
Le content de box.
</div>
CSS:
.mybox {
position: relative;
padding: 10px 20px;
background-color: #EEEEEE;
}
.mybox:after {
content: '';
position: absolute;
bottom: 0px;
left: 25%;
width: 50%;
border-bottom: 1px solid #0000CC;
}
... y un jsFiddle para una buena medida.
Nota al margen, ya que esta es una de mis respuestas más populares: también puede usar el pseudo-selector ': before' si lo desea. Elección del distribuidor La única razón por la que utilicé ': after' aquí es porque disfruto de la jerarquía visual, por lo que el _thing at the bottom_ va': after'. – indextwo
que puede utilizar:
line-height:50%; /*(or less, much less)*/
overflow:visible;
El texto es visible, pero el color del borde será sólo a la mitad del tamaño de la div.
Gracias Esto funciona para mí – NaveenDA
2018: Para navegadores modernos:
Puede utilizar border-image con gradientes algo así como ...
border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;
Demostración:https://jsfiddle.net/hz8wp0L0/
Herramienta:Gradient Editor
puedo usar:border-image(IE11)
no se puede hacer esto directamente. hay varias formas de resolver esto. pero primero, ¿tienes un ancho y/o altura fijos? – choise
Tendrás que fingirlo. Imágenes, js, divs falsos ... –
sí, es un ancho fijo. Sé que puedo hacer esto especificando algunas imágenes, etc. ¿y cómo puedo hacer esto usando JS? –