この行を作成する方法のアイデアは？

Question

こんにちは、Stackoverflow

私はCSS3が新しく、このイメージにラインを構築するための最良の方法を（現代の基準に従って）学びたいと考えています。いくつかの試行後

、これは私が思い付くことができる最高の一つです。 JsFiddle here

どのように影を追加することができますか？

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

Answer 1

これは基本的な考え方です。

1. 水平divコンポーネントに3つのdivが必要です。 をleft、center、rightと呼んでください。
2. 左と右のdivには、マージイン効果を与えるグラデーションがあります。あなたは単にその背景のCSSグラデーションを使用することができます。
3. センターdivには、1つの子要素（または擬似要素）が必要です。この要素には、右と下の罫線のみが設定されています。この子を 要素を45degだけ回転させると、矢印のように見えます。
4. 子要素が中央のdivの中央にある行を隠すことができないため、まだ問題が発生することがあります。 にこれを解決するには、中心divの中にさらに2つの子divを使用できます。 は、回転divの左右に配置されています。

さらに簡単なアプローチは、水平divコンポーネントにpng背景画像を使用することです。

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/