來自元素底部的Javascript垂直線

Question

我的想法是制造幾乎像圓棒棒棒糖的圓環（在我的情況下為矩形）底部具有無限的垂直線。 我讀到這可以使用css：after來完成，但是psuedoelements確實限制了我想做的事。 我希望將線作為其自己的元素。 還有另一種解決方法嗎？

Answer 1

一個具有較小width和更高height的div將是一個完美的“棒”。

范例（矩形lolipop：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/