how to make line using css

Question

I want to make a yellow line like in the image using css, but I don't have an idea how to make it, now I can only make line holes, but not vertical straight lines yet.

here is my code example

#holes {
  -webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   background-color: #1D3962;
   background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
   width: 100%;
   height: 100vh;
   margin: 0;
   padding: 0;
}

SVG or pseudo-elements + border

tacoshy
– tacoshy

2021-08-04 11:23:42 +00:00
Commented Aug 4, 2021 at 11:23 — tacoshy
– tacoshy, Commented Aug 4, 2021 at 11:23

Jaymin Maheta · Accepted Answer · 2021-08-04 11:55:41Z

3

I am writing one code for you that might solve your problem if you like the solution then please give it one like 😀

You can change the value of width to make it thin or thick.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#holes {
  -webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   background-color: #1D3962;
   background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
   width: 100%;
   height: 100vh;
   margin: 0;
   padding: 0;
}

#holes::before{
  content: "";
  display: block;
  width: 2px;
  height: calc(100vh - 68px);
  background-color: yellow;
  margin-left: 120px;
}

<div id="holes"></div>

edited Aug 4, 2021 at 11:55

answered Aug 4, 2021 at 11:34

Jaymin Maheta

544 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to make line using css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related