自定义CSS顶部边框

Question

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

Answer 1

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

1. 有＆＃34;部分＆＃34;左右边界。
2. 在顶部边框的中心添加一颗钻石（或者它是一个圆圈？）。

要实现数字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>标记以清除浮动年份。