CSS Инлайн Flow Стрелки

Question

Я пытаюсь создать встроенные стрелки потока, похожие на прилагаемом изображении:

мне удалось создать что-то с помощью CSS, однако, что мне нужно для каждой стрелки, чтобы содержать текст и все разваливается, когда вы пытаетесь добавить текст в центр div, и я не могу не думать о том, что должен быть более простой способ достичь этого.

https://jsfiddle.net/ez8632f4/

<div style="display:inline-block"> 
    <div id="zz" class="arrow-left"></div> 
    <div id="zz" class="arrow-ctr"></div> 
    <div id="zz" class="arrow-right"></div> 
</div> 

<div style="display:inline-block;position:relative;left:-30px"> 
    <div id="zz" class="arrow-left"></div> 
    <div id="zz" class="arrow-ctr"></div> 
    <div id="zz" class="arrow-right"></div> 
</div> 

.arrow-left { 
    display:inline-block; 
    width: 0; 
    height: 0; 
    border-top: 40px solid red; 
    border-bottom: 40px solid red; 
    border-left: 40px solid transparent; 
} 

.arrow-ctr { 
    display:inline-block; 
    width:150px; 
    background:red; 
    min-height:80px; 
    position:relative; 
    left: -4px; 
} 
.arrow-right { 
    display:inline-block; 
    height: 0; 
    border-top: 40px solid transparent; 
    border-bottom: 40px solid transparent; 
    border-left: 40px solid red; 
    position:relative; 
    left: -8px; 
} 

Мое намерение состоит в том, чтобы в конечном счете анимировать стрелки летающие их справа.

Answer 1

Вы можете добавить поплавок: левый к элементам:

CSS:

.arrow-container > div { 
    float: left; 
} 

HTML

<div style="display:inline-block;position:relative;left:-30px" class="arrow-container"> 
    <div id="zz" class="arrow-left"></div> 
    <div id="zz" class="arrow-ctr">asdasdasdasd </div> 
    <div id="zz" class="arrow-right"></div> 
</div> 

Вы можете изменить также .arrow-CTR до эр текст следующим образом:

.arrow-ctr { 
    display: inline-block; 
    width:150px; 
    background:red; 
    min-height:80px; 
    line-height: 80px; 
    position:relative; 
    text-align: center; 
} 

https://jsfiddle.net/9ay6L0bu/