关于如何构建这条线的想法？ [复制]答案

【问题标题】：Ideas on how to construct this line? [duplicate]关于如何构建这条线的想法？ [复制]
【发布时间】：2016-04-29 07:54:59
【问题描述】：

你好 Stackoverflow，

我是 CSS3 的新手，想了解在此图像中构建线条的最佳方法（根据现代标准）。

经过几次尝试，这是我能想到的最好的一个： JsFiddle here

如何添加阴影？

Any tips would be appreciated! Have an awesome coding day all :)

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
stackoverflow.com/questions/26472289/…
@j08691 这个问题没有混合效果。

【解决方案1】：

这是一个基本的想法。

你需要在你的水平 div 组件中有 3 个 div，让我们调用左、中、右。
左右 div 有一个渐变，可以产生合并效果。为此，您可以简单地在背景中使用 CSS 渐变。
中心 div 需要有一个子元素（或伪元素），它只设置了右边框和下边框。我们现在轮换这个孩子元素 45 度，所以它看起来像箭头。
您可能仍然遇到问题，因为子元素将无法隐藏在中心 div 中间运行的行。至解决这个问题，您可以在中心 div 内再使用 2 个子 div，这分别排列在旋转后的 div 左右。

另一种更简单的方法是为您的水平 div 组件使用 png 背景图像；）。

【讨论】：

【解决方案2】：

要做一条像这样的末端末端的线，你需要一个线性渐变。然后你可以在上面添加三角形。你应该先尝试一下，如果有问题再回来。这是开始的行：

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

【讨论】：