6

矢印を表示するために、途中で内訳のある水平の直線を生成しようとしています。線の下に表示されるコンテンツは、線の上に表示されるコンテンツの詳細を提供するという考え方です。行は次のようになります。

ここに画像の説明を入力

これを純粋な HTML と CSS (ビットマップ画像なし) で生成しようとしています。適切な結果が得られる場合は、 Font Awesomeの使用は許容されます。線の太さと色を制御する必要があります。ブレークダウンの角度は問題ではありません (上のサンプルでは 45 度と 90 度)。このCSS トライアングル トリックは知っていますが、このシナリオに適用する方法が思いつきません。

4

2 に答える 2

5

矢印の背景が透明なソリューションで、すべての背景で使用できます。

HTML:

<div class="line-separator">
    <div class="side-line"> </div>
    <div class="triangle"> </div>
    <div class="side-line"> </div>
</div>

CSS:

.side-line {
    display: inline-block;
    border-top: 1px solid black;
    width: 20%;
}

.triangle {
    display: inline-block;
    height: 7px;
    width: 7px;
    transform: rotate(45deg);
    transform-origin: center center;
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin: 0 -3px -3px;
}

ライブデモ: http://jsfiddle.net/85saaphw/

于 2016-02-09T09:16:26.663 に答える