Идеи о том, как построить эту линию?

Question

Hello Stackoverflow,

Я новичок в CSS3 и хотел бы узнать лучшие пути (в соответствии с современными стандартами), чтобы построить линию на этом изображении.

После нескольких попыток, это лучший я мог придумать: JsFiddle here

Как я могу добавить тень?

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

Answer 1

Вот основная идея для этого.

1. У вас должно быть 3 divs в вашем компоненте горизонтального div, давайте назовем их слева, в центре, справа.
2. левый и правый divs имеют градиент, который дает эффект слияния. Для этого вы можете просто использовать градиенты css в фоновом режиме.
3. Центр div должен иметь один дочерний элемент (или псевдоэлемент), который имеет только правую и нижнюю границы. Теперь мы вращаем этого дочернего элемента на 45deg, чтобы он выглядел как стрелка.
4. У вас могут быть проблемы, поскольку дочерний элемент не сможет скрыть линию, проходящую посередине для центра div. Разрешить это можно с помощью , вы можете использовать еще 2 дочерних divs в центре div, которые расположены слева и справа на повернутом div.

Еще один более простой подход - использовать фоновое изображение png для вашего горизонтального компонента div;).

Answer 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)); 
} 

https://jsfiddle.net/927Lp5bt/