¿Cómo puedo crear un borde en el centro de la div (horizontal)?

Tengo una línea de objetos/elementos como este:

¿Cómo puedo crear un borde en el centro de la div (horizontal)?

Quiero crear una línea, y el lugar es detrás de todos mis objetos, en el centro de si mi div.

Aquí es lo que estoy esperando hacer:

¿Cómo puedo crear un borde en el centro de la div (horizontal)?

Para crear un borde en la parte superior, inferior, derecho, izquierdo, o alrededor de un div es bastante simple, pero en el medio de la div es sorprendentemente difícil. He estado tratando de investigaciones sobre esto, pero no veo ninguna buena hasta ahora.

CSS experto quieren mostrar su habilidad CSS?

Violín

  • estás preguntando sólo para crear la línea horizontal en el centro de las formas?
  • Detrás de las formas. En el medio de la div.
  • supongo que la línea no puede cruzar en el círculo de uno.
  • ¿Por qué es eso ? ¿Por qué no podemos establecer el z-index para el menor ?
  • oh, ok tal vez usted debe publicar un jsfiddle, así que podemos empezar desde allí.
InformationsquelleAutor kyo | 2015-03-27

2 Kommentare

  1. 8

    Codepen

    Dar a este un ir:

    html

    <div></div>

    css

    div { width: 200px; 
      height: 200px; 
      border: red 1px solid;
      position: relative;
    }
    
    div:after { content: '';
      position: absolute;
      border-right: 2px green solid;
      height: 200px;
      width: 200px;
      transform: translateX(-50%);
    }
    div:before { content: '';
      position: absolute;
      border-bottom: 2px green solid;
      height: 200px;
      width: 200px;
      transform: translateY(-50%);
       }
    • Hola @rangerover.js he actualizado el código y el lápiz para mostrar tanto horizontal y vertical de la línea 🙂 – por desgracia, yo no puedo ver las imágenes de aquí de mi equipo de trabajo
    • Seguro compañero, revisa aquí jsfiddle @rangerover.js
    • Gracias a su motor de arranque de código. Voy a ser capaz de lograr lo que quiero aquí
    • Genial, acaba de perder la translate línea de rugosidad y la top: hasta 55% y creo que tendrás lo que buscas/
  2. 7

    Aquí es su propio actualizado JSFiddle

    .border-center { 
                width: 100%;
                border: red 1px solid;
                position: relative;
            }
    
    .border-center:before { content: '';
            position: absolute;
            bottom: 50%;
            border-bottom: 2px green solid;
            width: 100%;
            z-index:0;
        }
    • Buena idea acerca de los padres es relativo y el niño es absoluta, podemos controlar esta fuerza!

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea