how to draw dashed and solid vertical lines with css gradient and transparent colors

Question

  --c: rgba(84, 110, 122, 0.25) /* color */;
  --t: 1px /* thickness */;
  --g: 1%; /* gap */;
  --d: 5px /* control the dashes */;
           
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) calc(2*var(--g))/calc(4*var(--g)) 100%,
    conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);

The problem I have is that the fourth line should be solid but right now we can see the dashed line at the bottom. How I can't prevent the dashed line at every fourth position to be visible without removing the transparency of the color?

Check the picture

You may consider accepting the answer of your old question since you are using it: https://stackoverflow.com/q/72936022/8620333 — Temani Afif, Jul 22 '22 at 10:30

score 1 · Answer 1 · answered Jul 22 '22 at 10:28

1

Don't use a transparent color, make all the background transparent by using a pseudo element as background layer and adjust the opacity. Also don't use percentage value with gap, it won't work with the code you are using.

html:before {
  --c: rgba(84, 110, 12) /* color */;
  --t: 1px /* thickness */;
  --g: 10px; /* gap */;
  --d: 5px /* control the dashes */;
  
  content:"";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,var(--c) var(--t),#0000 0) calc(2*var(--g))/calc(4*var(--g)) 100%,
    conic-gradient(at var(--t) 50%,#0000 75%,var(--c) 0) 0/var(--g) var(--d);
  opacity:  0.25; /* the opacity here */
}

html {
  background: linear-gradient(90deg,red,pink);
}

answered Jul 22 '22 at 10:28

Temani Afif

245,468
26
309
415

but I need to have a responsive gap. If I can't use percentage, what will work? – pdcc Jul 22 '22 at 11:15
@pdcc use the `vw` unit if you background is full screen – Temani Afif Jul 22 '22 at 11:17
it's not fullscreen – pdcc Jul 22 '22 at 11:41

how to draw dashed and solid vertical lines with css gradient and transparent colors

1 Answers1