Error creating effect with css

Question

Error creating effect with css

Navigation

#1 by (3 votes)
#2 by (2 votes)

4

I want to make the following design with css, but it does not work for me. This is my code.

.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>

The result I want to obtain is the following:

html5 html css3 css

asked by Dayana Castillo 26.04.2017 в 02:07

source

2 answers

3

When it comes to making figures using CSS (now the possibilities are too broad), it is advisable to use classes to represent a figure or part of it. For example:

.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>

answered by 26.04.2017 в 02:59

SQL - Show date in "Lun dd-mm-yyyy" format Problem with Css FlexBox the content does not cover 100%

score 2 · Accepted Answer

No need to add new elements to your HTML, just by changing the CSS, you could use ::before and ::after to draw the circles and the dotted line is the element itself. Something like this:

.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>