自定义 CSS 上边框

Question

我必须为一组段落应用相同的样式。顶部边框必须看起来像这样。like this
我不想为我做，我只需要一些建议从哪里开始！谢谢！

Answer 1

看起来您需要为此做 2 件不同寻常的事情：

有 "partial" 左右边框。
在上边框的中心添加一个菱形（或者是一个圆圈？）。

要实现第 1 点，您可以向容器添加一个 ::before 和 ::after 伪元素。如果你让它们比主元素短，用白色填充，你可以定位它，使其与主元素的左右边框重叠，造成部分重叠和部分边框效果。

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

这有意义吗？

Answer 2

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

http://jsfiddle.net/Moonbird_IT/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> 标记来清除浮动年份。

自定义 CSS 上边框

Custom CSS top-border

css

border