que tiene una envoltura div otro igual modocss porcentaje border-width
<div id="container"><div id="box"></div></div>
Digamos que el contenedor tiene una dimensión de 100 px por 100 px. Quiero que la caja tenga una altura de 0px y un ancho de 0px. Sin embargo, quiero que el borde izquierdo de la caja llene el 50% del contenedor y el borde derecho del cuadro para llenar el otro 50% del contenedor.
¿Cómo hago esto con css?
Puede hacer lo que necesita, pero utilizando degradados lineales en lugar de bordes.
Utilice el siguiente marcado:
<div class="box"></div>
Y los siguientes estilos (ejemplo: http://jsfiddle.net/HxbnK/):
.box {
background-image: linear-gradient(154deg, red 50%, transparent 50%),
linear-gradient(26deg, red 50%, transparent 50%);
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 50% 100%;
height: 100px;
width: 100px;
}
sólo tener en cuenta que el elemento .box tiene que ser un cuadrado para que esto funcione correctamente.
jajaja, tan inteligente. – John
Si no se calcula manualmente y se especifica 50px como el ancho del borde, no se puede. La propiedad border-width solo acepta longitudes o las palabras clave thin, medium y thick.
Como lo sugiere Saad Imran, es posible que solo pueda usar dos div s con 50% de ancho cada uno.
pero quiero las formas trapezoidales del borde ... básicamente si hago ancho de borde: 0% 50% 80% 50%; Podré tener un triángulo dentro de la caja. ¡Entonces puedo dibujar otro div debajo de la caja para hacer un tronco de árbol! con el triángulo en la parte superior, ¡las hojas del árbol! – John
¿Por qué no usar una imagen? –
Quiero tener una gran cantidad de árboles de diferentes tamaños en el tronco y las hojas. De todos modos, hice trampa por ahora al hacer esto http://jl.evermight.com/sunrise/. Sería bueno si pudiera cambiar esas hojas de los árboles para que sean triángulos. – John
Sólo cambia px a vw como
border-width: 10px;
a
border-width: 10vw;
Su hacer cuál es el porcentaje do ....
El único problema con esta solución es que no es compatible con muchos navegadores. http://caniuse.com/#feat=viewport-units –
¿Por qué no tener dos 'DIVs' con un ancho de 50% cada uno ? –
porque quiero las formas trapezoidales de los bordes – John