用伪css实现横行到容器宽度的直线

Question

我想要画一条横贯它所在容器的宽度的水平线。内联元素应该如下所示：

//////////////////////////////////////////////////////////////////

很像一个横向规则。我试过了，但是只有在伪元素的内容属性中放置足够的斜线时，才能获得100%的宽度。以下是我的HTML代码：

<div style='width: 100%;>
   <p class='horizontal-line'></p>
</div>

下面是我的CSS代码：

.horizontal-line:before
{
 content: '///////////////////////////////////////////////////////////////////////////////////';
 margin: 0;
 padding: 0;
 color: purple;
 width: 100%;
 font-size: 10px;
}

结果是：

///////////////////////////////////////////

但它不跨越到100%宽度的外部div。为了做到这一点，我必须在content属性中添加更多的斜杠。我知道有其他更好的方法来实现这一点。

P.S:我不太擅长使用伪元素，可能做错了什么。有人能指出吗？

编辑:如果我在content属性中放置了许多斜线，那么如果将水平线放置在较小的容器中，则会转到两行。这是小提琴链接

Answer 1

我觉得你应该试试线性梯度。请找到下面的代码。

​

.horizontal-line:before
{
 content: '';
 margin: 0;
 padding: 0;
 color: purple;
 width: 100%;
 height: 10px;
 font-size: 10px;
 display:block;
 background: repeating-linear-gradient(135deg,purple,purple .25em,transparent 0,transparent .75em );

}

<div style='width: 100%;'>
   <p class='horizontal-line'></p>
</div>

​

Answer 2

您可以使用css background属性来实现这一点，如下所示：

​

.horizontal-line {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 10px;
 background: purple linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)) repeat scroll 0 0 / 40px 40px
}

<div style='width: 100%;'>
   <p class='horizontal-line'></p>
</div>

​

Answer 3

你在这里有三个选择

1. 使用超长并将其父溢出设置为隐藏。
2. 使用css 线性梯度绘制条纹。这里的问题是，梯度可能看起来很差(看起来像是混叠问题)。但这里是一个很好的解释和建议如何克服这一问题。
3. 将您的模式绘制为图像并使用背景重复，您可以在线绘制模式(即http://www.patternify.com/ )，并只使用base64版本的图像。

以下是所有三个选项的示例：

​

p { width: 80%; margin: 0px auto; margin-top: 30px; padding: 0; }
.container { width: 80%; border: 2px solid #888; margin: 10px auto; padding: 10px 0; }
.horizontal-line { width: 100%; height: 10px; }

.horizontal-line-v1 { overflow: hidden; }
.horizontal-line-v1:before
{
 content: '//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
 color: purple;
 font-size: 20px;
}

.horizontal-line-v2 { 
  background-image: linear-gradient(-45deg, purple 25%, transparent 25%, transparent 50%, purple 50%, purple 75%, transparent 75%, transparent);
  background-size: 4px 4px;
}

.horizontal-line-v3 {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQYV2NkQAMNDA3/GZHFQAINDA2McEGYAEgRWBBZACyILgASBACrXQ4FrzarHwAAAABJRU5ErkJggg==");
}

<p>Stripes using :before and content</p>
<div class="container">
   <div class='horizontal-line horizontal-line-v1'></div>
</div>

<p>Stripes using css linear-gradient</p>
<div class="container">
   <div class='horizontal-line horizontal-line-v2'></div>
</div>

<p>Stripes using base64 image</p>
<div class="container">
   <div class='horizontal-line horizontal-line-v3'></div>
</div>

​

这是jsFiddle