Tengo que aplicar el mismo estilo para un conjunto de párrafos. El borde superior debe tener el mismo aspecto. así
No quiero hacerlo por mí, ¡solo necesito un consejo por dónde empezar! ¡Gracias!

0
gulyasfeccferenc 16 feb. 2015 a las 18:14

2 respuestas

La mejor respuesta

Parece que hay 2 cosas fuera de lo común que debe hacer para esto:

  1. Tienen bordes izquierdos y derechos "parciales".
  2. Agrega un diamante (¿o es un círculo?) En el centro del borde superior.

Para alcanzar el número 1, puede agregar un pseudo elemento :: before y :: after al contenedor. Si los hace más cortos que el elemento principal, rellénelo con blanco, puede colocarlo de modo que se superponga a los bordes izquierdo y derecho del elemento principal, provocando una superposición parcial y el efecto de borde parcial.

Para el número 2, puede agregar un elemento separado y colocarlo sobre el centro de la parte superior del borde superior del elemento principal.

¿Esto tiene sentido?

1
leishman 16 feb. 2015 a las 15:23

Si no desea / no puede usar imágenes, pero puede agregar código adicional a sus párrafos, esto debería funcionar para usted:

http://jsfiddle.net/Moonbird_IT/3rafe27z/2/

Esto dibuja la línea de tiempo adicional con el punto encima de su párrafo:

<div class="head-info">
    <span class="year-left">2000</span>
    <span class="year-right">2005</span>
    <div class="yellow-dot"></div>        
</div>

El resto es solo CSS que coloca los años a la izquierda y a la derecha y el punto aparece en el medio. Es posible que deba agregar una etiqueta <br> adicional para borrar los años flotantes.

0
SaschaM78 16 feb. 2015 a las 15:37