css Question posted in
Some basic documentation can be found here.

How to draw repeating *horizontal* dashed lines using CSS conic-gradient?

I have just read how to draw dashed and solid vertical lines with css gradient

But i have to say, that despite reading the MDN docs over and over again, and reading the suggested code, I have no clue how it works. The syntax of that is impenetrable.

I asked a follow up question on that thread asking how to make the lines horizontal, but the admins saw fit to delete it.

Is anybody with ninja level CSS skills able to help with this request which should be simple, but which the CSS standards authors have made difficult?

This is the requirement: horizontal lines

I created a Codepen in which I tried to manipulate that CSS, but just changing any attribute breaks the output in what appears to be unpredictable ways.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to Temani Afif for helping me achieve my goal.

    For anybody else struggling to comprehend, I ended up with

    background-image : conic-gradient(at 50% 1px, transparent 75%, var(--line-color) 0turn);

    Where 1px is the line height.

    The explicit 0turn might help explain how the gradient works. I'm still figuring out how that makes a "-".

    The following background style properties which were embedded in the background property in the original answer, I preferred to specify separately in my own CSS so as to be clearer to maintainers (and my future self)

    background-size     : 10px calc(var(--row-height) + 1px);
background-position : 0px var(--row-height);

    Where 10px serves as the total width which the dash and line occupy. The 50% x start position of the gradient meaning it is an even pattern.

    So what we are creating is a 10 by (row height + 1) block which repeats in both the x and y dimensions.


  2. 0

    Here is another "impenetrable syntax" same as the other (I am the author of the other by the way)

    html {
  --c: #222; /* color */
  --t: 2px; /* thickness */
  --d: 10px; /* control the dashes */
  --g: 50px;  /* distance between vertical lines */
  --w: 150px; /* distance between horizontal lines*/
 
  background:
    conic-gradient(from 90deg at var(--t) var(--t),#0000 25%,var(--c) 0)
     0 0/var(--w) calc(4*var(--g)),
    conic-gradient(at 50% var(--t),#0000 75%,var(--c) 0)
     0 0/var(--d) var(--g);

}

    This is not simple and the CSS authors didn’t make this difficult. I am just using an optimized code that you can easily control using CSS variables but you cannot easily adjust to create another kind of grid. You need a different code for that

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search