CSS - Borde donde solo la mitad de un borde es visible

Question

Estoy confundido ya que tengo que hacerlo funcionar en CSS solo para tener un div donde el borde solo sería visible en la mitad de su ancho.

El estilo de borde es un simple 1px solid #000;

Sin embargo, quiero que la parte superior de la div 'frontera s para no ser visible en todas partes (en el 100% en el div' ancho s), lugar sólo en la primera 50% del ancho de div.

No he podido obtener un ejemplo de esto en ninguna parte, y debe estar en porcentajes, por lo que la bolsa de trucos habitual (imagen en la segunda mitad, ...).

Answer 1

Que este trabajo:

#holder { 
 
     border: 1px solid #000; 
 
     height: 200px; 
 
     width: 200px; 
 
     position:relative; 
 
     margin:10px; 
 
} 
 
#mask { 
 
     position: absolute; 
 
     top:-1px; 
 
     left:1px; 
 
     width:50%; 
 
     height: 1px; 
 
     background-color:#fff; 
 
}

<div id="holder"> 
 
     <div id="mask"></div> 
 
</div> 
 

 

Answer 2

Si usted no quiere meterse con el código HTML en absoluto, usted puede hacerlo con un pseudoelement vacío, utilizando sólo CSS. Usted todavía necesita saber el color de fondo, por supuesto (suponiendo blanco aquí):

<span class="half-a-border-on-top">Hello world!</span> 

<style> 
.half-a-border-on-top { 
    border-top:1px solid black; 
    position: relative; 
} 
.half-a-border-on-top:after { 
    padding:0;margin:0;display:block;/* probably not really needed? */ 
    content: ""; 
    width:50%; 
    height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */ 
    background-color:white; 
    position: absolute; 
    right:0; 
    top:-1px; 
} 
</style> 

Resultado:

fragmentos

.half-a-border-on-top { 
 
     border-top:1px solid black; 
 
     position: relative; 
 
    } 
 
    .half-a-border-on-top:after { 
 
     padding:0;margin:0;display:block;/* probably not really needed? */ 
 
     content: ""; 
 
     width:50%; 
 
     height:1.1px; 
 
     background-color:white; 
 
     position: absolute; 
 
     right:0; 
 
     top:-1px; 
 
    }

<span class="half-a-border-on-top">Hello world!</span>

violín:

http://jsfiddle.net/vL1qojj8/

Answer 3

le permiten mostrar cómo editar el código de Leo, para poner un medio frontera de la izquierda en el centro.

probar esto:

código html

<div class="half-a-border-on-left">Hello world!</div>

código CSS

<style> 
.half-a-border-on-left { 
    border-left: 1px solid black; 
    position: relative; 
    height: 50px; 
    background: red; 
} 
.half-a-border-on-left:after { 
    padding:0; 
    margin:0; 
    content: ""; 
    width: 1px; 
    height: 10px; 
    background-color:white; 
    position: absolute; 
    left:-1px; 
    top: -10px; 
} 
.half-a-border-on-left:before { 
    padding:0; 
    margin:0; 
    content: ""; 
    width: 1px; 
    height: 10px; 
    background-color:white; 
    position: absolute; 
    left: -1px; 
    bottom: -5px; 
} 
</style> 

Esos son código que utilizo para poner un medio frontera gracias Leo,

Answer 4

Me encanta Hyderabad

*** 

.div_1 { 
 
    width: 50px; 
 
    border-bottom: 2px solid black; 
 
} 
 
.div_2 { 
 
    width: max-content; 
 
    margin-bottom: 10px; 
 
}

<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>

---