Raviteja Raviteja - 4 years ago 169
HTML Question

How to draw multiple vertical lines inside a semi-circle?

I need to draw vertical lines inside a semi-circle which is present inside the egg shaped div.

HTML

<body>
<div id="white">
<div id="yolk">
</div>
<div id="verticalLine1">
</div>
</div>
</body>


CSS

body {
background-color: #98FDF5;
position: relative;
}

#white {
display: block;
width: 180px;
height: 240px;
background-color: #ffffff;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

#white #yolk {
position: absolute;
width: 140px;
height: 70px;
z-index: 2;
top: 130px;
left: 20px;
border-radius: 0 0 80px 80px;
border: 0.08em solid black;
padding-bottom: -50px;
}

#verticalLine1 {
border-top: 0.08em solid black;
z-index: 4;
padding-top: 10%;
}


Fiddle for my work.

Answer Source

How about using a repeating-linear-gradient to do the job. Browser support is not that bad.

Can i use CSS Repeating Gradients.

You can easily rotate the lines if you wish.

body{
  background-color:#98FDF5;
  position:relative;
}
#white {
  display:block;
  width: 180px;
  height: 240px;
  background-color: #ffffff;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#white #yolk {
  position: absolute;
  width: 140px;
  height: 70px;
  z-index:2;
  top:130px;
  left:20px;
  border-radius: 0 0 80px 80px;
  border:0.08em solid black;
  padding-bottom:-50px;

  background-image:repeating-linear-gradient(90deg, white -14px, white 27px, black 27px, black 29px);

}
#verticalLine1 {
  top:100px;
  border: thick solid black;
}
<body>
<div id="white">   
<div id="yolk">

</div>
<div id="verticalLine1">
</div>
</div>
</body>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download