Question

我需要在蛋形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我的工作。

Answer 1

如何使用repeating-linear-gradient来完成这项工作。浏览器支持并不是那么糟糕。

Can i use CSS Repeating Gradients

如果您愿意，可以轻松旋转线条。

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>

Answer 2

这会是一个开始吗？简单和浏览器支持到IE9。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我会建议一个简单的解决方案

- 将for(i=0; i<centroid.length; i++) centroid_prev[i] = centroid[i].posX; for(frame j=0 to ...) { ... recompure centroids for(i=0; i<centroid.length; i++) { centroid_now = centroid[i].posX; if (centroid_now >= xLimit && centroid_prev[i] < xLimit) { count++; } } for(i=0; i<centroid.length; i++) centroid_prev[i] = centroid[i].posX; }// end j标记添加到您的HTML代码

为您的代码添加<hr>

在你的css类中添加这个

class="line"

然后你可以在任何你想要的地方保留它。

编辑* 如果transform: rotate(90deg);消失，请尝试给它一个

<hr>

如何在半圆内绘制多条垂直线？

3 个答案: