Как правильно через css делать вот такие линии?
1. CSS transform, как уже написал @fulli 
2. SVG (в качестве фона или просто вставка).
3. Старый-старый вариант с border.
4. Clip-path — предложение @DonSinDRom (webkit only)
5. linear-gradient — предложение @DonSinDRom
Вам сюда