0

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.

enter image description here

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;
}
1
  • SVG or pseudo-elements + border Commented Aug 4, 2021 at 11:23

1 Answer 1

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>

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.