如何设计带有圆角边缘的垂直线？

Question

我需要一条带有圆角边缘的垂直线。我使用了 border-left 但 border-radius 不适用于圆角边缘。

Answer 1

有很多方法可以使用 CSS 来做到这一点。您可以使用跨度并仅使用高度和宽度对其进行样式设置，也可以使用诸如 :before 或 :after 之类的伪元素并对其进行样式设置。

例如，这是跨度：

    div {
        display: flex;
        padding: 10px;
        align-items: center;
    }
    span {
        height: 40px;
        width: 5px;
        background-color: #FECC01;
        border-radius: 99px;
        margin: 0 20px;
    }

<div>
    <p>
        9:30am
    </p>
    <span></span>
    <p>
        School Tour
    </p>
</div>

无论采用哪种方式，形状的样式都是相同的，高度、宽度、背景颜色。