CODEWITHSUNDEEP
htmlcss
muhfaridzia
muhfaridzia

Reputation: 445

how to make line using css

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;
}

Upvotes: 0

Views: 184

Answers (1)

Jaymin Maheta
Jaymin Maheta

Reputation: 54

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>

Upvotes: 3

Related Questions