来自元素底部的 Javascript 垂直线

Question

我的想法是制作一个几乎像 Lollipop 一样的圆圈(在我的例子中是一个矩形)的底部有一条无限长的垂直线。我读到这可以使用 css :after 来完成，但是 psuedoelements 确实限制了我想做的事情。我宁愿把这条线作为它自己的元素。还有其他方法吗？

Answer 1

具有较小宽度和更高高度的div将成为一个完美的“棒”。

示例(矩形 Lollipop :D):

CSS:

#lolipop {
    height: 400px;
    width: 200px;
    position: absolute;
    bottom: 0;
}
#lolipop .rect {
    width: 100px;
    height: 75px;
    background-color: red;
    margin: 0 auto;
}
#lolipop .stick {
    width: 5px;
    height: 325px;
    background: green;
    margin: 0 auto;
}

HTML:

<div id="lolipop">
    <div class="rect"></div>
    <div class="stick"></div>
</div>

演示:http://jsfiddle.net/uao97L8q/