Как сделать декоративный элемент (см картинку)

Подскажите как реализовать верстку белого пунктира и сделать на сгибах круги с цифрами? Это не должно быть изображением. Между изгибами будет вставлен текст.

Ответ

html, body { position: relative; background-color: #308a56; color: #fff; font-size: 20px; line-height: 20px; } .item { position: relative; padding: 3rem; text-align: center; } .item+.item { margin-top: -2px; } .item:after { content: ''; position: absolute; display: block; bottom: -2px; border-bottom: 2px dashed #fff; left: 6.6rem; right: 6.6rem; } .item__text { height: 1rem } .item__num { position: absolute; border: 2px solid #fff; line-height: 3rem; font-size: 1rem; top: 2rem; height: 3rem; width: 3rem; border-radius: 3rem; background-color: #308a56; z-index: 2; } .item_left .item__num { left: 1rem } .item_right .item__num { right: 1rem } .item_center .item__num { right: 0; left: 0; margin: auto; } .item__num:after { content: ''; position: absolute; display: block; bottom: -2rem; border-bottom: 2px dashed #fff; height: 2rem; width: 4rem; z-index: 1 } .item_left .item__num:after { left: 50%; border-left: 2px dashed #fff; border-radius: 100% / 0 0 0 3rem; } .item_right .item__num:after { right: 50%; border-right: 2px dashed #fff; border-radius: 100% / 0 0 3rem 0; } .item__num:before { content: ''; position: absolute; display: block; top: -2rem; border-top: 2px dashed #fff; height: 2rem; width: 4rem; z-index: 1; } .item_left .item__num:before, .item_center .item__num:before { left: 50%; border-left: 2px dashed #fff; border-radius: 100% / 3rem 0 0 0; } .item_right .item__num:before { right: 50%; border-right: 2px dashed #fff; border-radius: 100% / 0 3rem 0 0; } .items .item:first-child .item__num:before, .items .item:last-child .item__num:after, .items .item:last-child:after { display: none; } .item.item_before-center:after { left: calc(4rem + 50%) }

1

text

2

text

3

text

4

text

⌄