Question 42769 in Html Question posted in
Some basic documentation can be found here.

Turn straight lines into dot – Html

I don’t know if the question title is correct or not
this is what i do
line

and what i want
dót

here is my code

<div class="item_dot --straight"></div>

.item_dot {
 background: red;
 width: 10px;
 height: 100%;
 }

.item_dot { 
  background: red; 
  width: 10px; 
  height: 100px; 
 }
<div class="item_dot --straight"></div>

I just want to use CSS to change, as height increases, so does the number of dots.
If I scroll the page, these dots appear one by one

Tags:

3

Answers


  1. 0

    here is what I have achieved based on the question.

    .item_dot {
  border: none;
  border-top: 3px dotted black;
  height: 400px;
  width: 50%;
  transform: rotate(90deg);
}
    <div class="item_dot --straight"></div>

    Hope this helps, and you can also achieve similar results using <hr> tag
    Here is an example

    and to achieve this

    I just want to use CSS to change, as height increases, so does the
    number of dots. If I scroll the page, these dots appear one by one

    you would need to implement JavaScript.

    Login or Signup to reply.
  2. 0

    we added just the border-left please check it.
    To overcome this problem just add these styles please check this link:

    https://codesandbox.io/embed/zen-aj-5djm7b?fontsize=14&hidenavigation=1&theme=dark

    1st way:

     .item_dot:after {
      content: "";
      position: absolute;
      width: 10px;
      height: 100%;
      border-left: 4px dotted red;
      top: 0;
      bottom: auto;
      left: 0;
  }

    or else another way is if you get height 100px then you have apply this css

     .item_dot {
    border-left: 4px dotted red;
    height:100px;
  }
    Login or Signup to reply.
  3. 0 
    .item_dot { 
  border-left: 10px dotted red;
  box-sizing: border-box; 
  height: 100px;   
}
    <div class="item_dot"></div>
    1. Apply a dotted border on the left or right side of the div.
    2. Remove the background, set the border-color instead.
    3. Set the size of the border instead of setting the width.
    4. Lastly, add border-box box sizing so the div considers the size of the border.
    5. Adjust the height as needed.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search