自定义CSS顶部边框

Question

对于一组段落，我必须采用同样的风格。顶部的边框必须是这样的。像这样

我不想为我自己做，我只是需要一些建议，从哪里开始！谢谢!

Answer 1

看起来你需要做两件不寻常的事情：

1. 有“部分”左右边框。
2. 添加一个钻石(或者它是一个圆圈？)到最高边界线的中心。

要实现数字1，您可以在容器中添加一个：：前面和：：后伪元素。如果你使它们比主元素短，用白色填充它，你可以定位它，使它重叠主元素的左右边框，造成部分重叠和部分边框效应。

对于第二个元素，您可以添加一个单独的元素，并将其放置在主元素顶部边框顶部的中心。

这有道理吗？

Answer 2

如果您不想/不能使用图像，但可能会在段落中添加其他代码，这应该适用于您：

它/3rafe27z/2/

这将绘制段落上方的圆点的附加时间线：

<div class="head-info">
    <span class="year-left">2000</span>
    <span class="year-right">2005</span>
    <div class="yellow-dot"></div>        
</div>

剩下的只是CSS将年份定位到左边和右边，而点出现在中间。您可能需要添加一个额外的<br>标记来清除浮动的年份。