CODEWITHSUNDEEP
htmlcss
Raviteja
Raviteja

Reputation: 3489

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.

Upvotes: 1

Views: 983

Answers (3)

Asons
Asons

Reputation: 87191

Would this be a start? Simple and browser support down to IE9.

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;
    text-align: center;
    overflow: hidden;
}
.verticalLine1 {
  display: inline-block;
  position: relative;
  width: 8px;
  height: 100%;
  border: 0px solid black;
  border-width: 0 4px;
  margin: 0 2px;
}
<div id="white">   
  <div id="yolk">
    <div class="verticalLine1"></div>
    <div class="verticalLine1"></div>
    <div class="verticalLine1"></div>
    <div class="verticalLine1"></div>
    <div class="verticalLine1"></div>
    <div class="verticalLine1"></div>
  </div>
</div>

Upvotes: 0

DavidDomain
DavidDomain

Reputation: 15293

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>

Upvotes: 1

dtmnn
dtmnn

Reputation: 243

I will suggest a simple solution

-Add <hr> tag to your HTML Code

Give your tag a class="line"

In your css class add this 

transform: rotate(90deg);

Then you can margin it where ever you want.

Edited* If the <hr> dissapears then try give it a 

possition: absolute

Upvotes: 0

Related Questions