关于如何构建这条线的想法？

Question

Hello Stackoverflow，

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

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

如何添加阴影？

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

Answer 1

这是一个基本想法。

1. 你需要在你的水平div组件中有3个div，让我们调用 他们离开，居中，向右。
2. 左右div具有渐变效果，可提供合并效果。您可以在后台使用css渐变。
3. 中心div需要有一个子元素（或伪元素），它只设置了右边框和底边框。我们现在轮换这个孩子 元素乘45deg所以它看起来像箭头。
4. 您可能仍然遇到问题，因为子元素无法隐藏中间div中间运行的行。至 解决这个问题，你可以在中心div中使用2个以上的子div 左右排列在旋转的div上。

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

Answer 2

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

scan

https://jsfiddle.net/927Lp5bt/