ブートストラップジャンボトロンが左矢印付き

Question

左の別の列のテキストを指している左矢印が付いたジャンボトロン（別のコンポーネントを使用するかもしれない）を作成しようとしています。

以下の画像は、私がやろうとしていることを正確に示しています。

これはどのように正確に機能し、どのように達成されますか？

left-arrow-box

Answer 1

これは、カスタマイズされたボーダー属性を持つ別のコンポーネントを使用して行うことができます。

例えば、

CSS：

.jumbo { 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted black; 
} 

.jumbo .arrow { 
    width: 120px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    position: absolute; 
    z-index: 1; 
    top: -5px; 
    left: 110%; 
} 

.arrow::after { 
    content: ""; 
    position: absolute; 
    top: 20%; 
    right: 100%; 
    margin-top: -8px; 
    border-width: 20px; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
} 

HTML：

<div class="jumbo"> 
    <span class="arrow">Jumbotron</span> 
</div> 

P.S.必要に応じて属性を調整する必要があります。

ここにはjsfiddle