4

Quiero realizar el siguiente diseño con css, pero no me funciona. Este es mi código.

.card-face-path {
    background: -webkit-repeating-linear-gradient(#BA68C8, #BA68C8 3px, transparent 3px, transparent 6px);
    background: repeating-linear-gradient(#BA68C8, #BA68C8 3px, transparent 3px, transparent 6px);
    border-color: #BA68C8;
}
.card-face-path {
    position: absolute;
    left: 105px;
    top: 36px;
    width: 2px;
    height: 23px;
}
<div class="card-face-path"></div>

El resultado que deseo obtener es lo siguiente:

introducir la descripción de la imagen aquí

2 respuestas 2

3

Cuando se trata de hacer figuras usando CSS (ahora las posibilidades son demasiado amplias), es recomendable usar clases para representar un figura o parte de ella. Por ejemplo:

.ball {
  border: 3px solid #BA68C8;
  border-radius: 100%;
  height: 15px;
  width: 15px;
}

.lines {
  border: 3px dashed #BA68C8;
  margin: 35px 0 0 -23px;
  transform: rotate(90deg);
  width: 60px;
}

.figure {
  display: flex;
  flex-flow: column nowrap;
  margin: 50px auto;
  justify-content: center;
  width: 50px;
}

.ball:last-of-type {
  margin: 35px 0 0 0;
}
<div class="figure">
  <div class="ball"></div>
  <div class="lines"></div>
  <div class="ball"></div>
</div>

2
  • 1
    Muchas Gracias! Commented el 26 abr. 2017 a las 1:03
  • A diferencia de la respuesta de Álvaro, esta solución te permite escribir código OOCSS, que es un conjunto de prácticas para escribir CSS reusable. En dibujos pequeños como este, la solución de Álvaro puede ser simple y práctica, pero en casos complejos, no es recomendado. Tenlo en cuenta para futuros dibujos.
    – gugadev
    Commented el 26 abr. 2017 a las 14:55
2

Sin necesidad de añadir nuevos elementos en tu HTML, sólo cambiando el CSS, podrías usar ::before y ::after para dibujar los círculos y que la línea punteada sea el elemento en sí. Algo como esto:

.card-face-path {
    position: absolute;
    left: 105px;
    top: 36px;
    width: 0px;
    height: 50px;
    border-left: 4px dotted #BA68C8;
}

.card-face-path::before, .card-face-path::after {
  content:"";
  position:absolute;
  top:-11px;
  left:-11px;
  border:4px solid #BA68C8;
  width:10px;
  height:10px;
  border-radius:100%;
  background:white;
}

.card-face-path::after {
  top:auto;
  bottom:-11px;
}
<div class="card-face-path"></div>

1
  • La principal contra con usar los psedoselectores before y after al dibujar es que rompen con OOCSS perdiendo flexibilidad. Sin embargo, para este caso en específico, esta solución es la mejor.
    – gugadev
    Commented el 26 abr. 2017 a las 14:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.