CSS: Establecer frontera a mitad de la anchura

Considérese lo siguiente:CSS: Establecer frontera a mitad de la anchura

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

.box{ 
    width:500px; 
    border-bottom: 1px solid #ccc; 
}

Fijará el borde inferior del ancho completo de la caja (500 píxeles). Pero en lugar de establecer el fondo frontera a toda la anchura, me gustaría establecer 300px, en medio del fondo de la caja, ¿cómo debo hacer eso ..

Fuente

2012-01-10 user1117313

puede poner un centrado ''

en la parte inferior de la caja? Luego puedes darle el estilo exacto como lo necesitas. –

En realidad, el relleno es para controlar eso. – noob

@micha que también rellenará el contenido dentro de la 'caja' –

¿Puedes arrojar un <hr> en la parte inferior de tu caja?

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

.box{ 
    width:500px; 
} 

.box hr{ 
    width: 300px; 
    border-bottom: 1px solid #ccc; 
}

http://jsfiddle.net/MuAKF/

Fuente

2012-01-10 18:07:57

usted puede hacer esto:

.box { 
 
     position: relative; 
 
     width: 500px; 
 
    } 
 
    .border { 
 
     position: aboslute; 
 
     background: #ccc; 
 
     left: 100px; 
 
     bottom: 0; 
 
     width: 300px; 
 
     height: 1px; 
 
    }

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

Pero hay infinitas posibilidades. Algunos son más semánticamente correctos que otros; esta solución es simplemente una solución rápida.

Fuente

2012-01-10 18:05:55 wanovak

Se puede usar un Imagen de fondo:

.box{ 
    width:500px; 
    border-bottom: 1px solid #ccc; 
    background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/ 
    background-position: bottom left; 
    background-repeat:no-repeat; 
}

Fuente

2012-01-10 18:08:02

¡Sí! Y también puede usar degradados CSS para generar la imagen en CSS si es un gradiente simple o un color sólido: 'background-image: linear-gradient (black, black); fondo de tamaño: 50% 1px; posición de fondo: 50% 100% '. –

Yo sugeriría hacer algo como esto, funciona bien en Firefox

<style type="text/css"> 

.box{ 

    width: 500px; 

    height: 20px; 

} 

.boxHalfWidth{ 

    width: 250px; 

    height: 1px; 

    border-bottom: 1px solid #CCC; 

} 

</style> 

</head> 

<body> 

<div class="box"> 

some data 

<div class="boxHalfWidth"></div> 

</div> 

</body>

Fuente

2012-01-10 18:10:53 redDevil

Uso innecesario de elementos HTML adicionales. –

Puede utilizar :: after or :: before pseudo-selectores. Al igual que :

<div> something here </div>

CSS:

div { 
    width: 500px; 
    height: 100px; 
    position: relative; 
    padding-top: 20px; 
    margin-top: 50px; 
} 

div::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    width: 50%; 
    left: 25%; 
    border-top: 1px solid red; 
}

Aquí está el jsfiddle

Fuente

2014-06-04 08:05:33

Esta es la respuesta –

Puede usar la misma solución para un borde vertical. – titusfx

aquí hay un problema, ¿puedo usar la sección ** contenido ** de alguna forma para dibujar un borde? sin usar la propiedad ** border **? sólo me preguntaba – Joey

CSS: Establecer frontera a mitad de la anchura

Respuesta

Cuestiones relacionadas