Верстка блоков со стрелочками

Верстка блоков со стрелочками
HTML и CSS 0    3153 0
Верстка блоков со стрелочками

Иногда нужно показать на сайте последовательность действий или цепочку (хронологию) событий. Для этого подойдет следующая верстка на HTML и CSS:

Скачать архив

Содержание архива:

HTML разметка

  1. 1 день

    Сегодня я ничего не делал

  2. 2 день

    Сегодня я опять ничего не делал

  3. 3 день

    Сегодня я опять ничего не делал

  4. 4 день

    Сегодня я опять ничего не делал

  5. 5 день

    Сегодня я опять ничего не делал

  6. 6 день

    Сегодня я опять ничего не делал

  7. 7 день

    Сегодня я опять ничего не делал

  8. 8 день

    Сегодня я опять ничего не делал

  9. 9 день

    Сегодня я опять ничего не делал

  10. 10 день

    Сегодня я опять ничего не делал

  11. 11 день

    Сегодня я опять ничего не делал

  12. 12 день

    Сегодня я опять ничего не делал

  13. 13 день

    Сегодня я опять ничего не делал

  14. 14 день

    Сегодня я опять ничего не делал

  15. 15 день

    Сегодня я опять ничего не делал

  16. 16 день

    Сегодня я опять ничего не делал

  17. 17 день

    Сегодня я опять ничего не делал

  18. 18 день

    Сегодня я опять ничего не делал

  19. 19 день

    Сегодня я опять ничего не делал


CSS оформление

#arroe_block ol{margin:0;list-style:none;padding:0;--hue:1;--unit:1rem}
#arroe_block p{line-height:1.3}
#arroe_block .event-date{margin:0 0 .25rem;font-weight:700}
#arroe_block .event-description{margin:0}
#arroe_block li{--height:7rem;position:relative;display:block;background-color:hsl(calc(var(--hue)*360/20),90%,65%);border-color:hsl(calc(var(--hue)*360/20),90%,65%);padding:1rem;margin:2rem 0}
#arroe_block li::before{content:"";background-color:inherit;position:absolute;display:block;width:var(--unit);height:var(--unit);top:100%;left:calc(50% - (var(--unit)/2))}
#arroe_block li::after{content:"";position:absolute;display:block;top:calc(100% + var(--unit));left:calc(50% - (var(--unit)));border:var(--unit) solid transparent;border-top-color:inherit}
#arroe_block li:last-child::before,#arroe_block li:last-child::after{content:none}
#arroe_block li:nth-child(20n+1){--hue:1}
#arroe_block li:nth-child(20n+2){--hue:2}
#arroe_block li:nth-child(20n+3){--hue:3}
#arroe_block li:nth-child(20n+4){--hue:4}
#arroe_block li:nth-child(20n+5){--hue:5}
#arroe_block li:nth-child(20n+6){--hue:6}
#arroe_block li:nth-child(20n+7){--hue:7}
#arroe_block li:nth-child(20n+8){--hue:8}
#arroe_block li:nth-child(20n+9){--hue:9}
#arroe_block li:nth-child(20n+10){--hue:10}
#arroe_block li:nth-child(20n+11){--hue:11}
#arroe_block li:nth-child(20n+12){--hue:12}
#arroe_block li:nth-child(20n+13){--hue:13}
#arroe_block li:nth-child(20n+14){--hue:14}
#arroe_block li:nth-child(20n+15){--hue:15}
#arroe_blockli:nth-child(20n+16){--hue:16}
#arroe_block li:nth-child(20n+17){--hue:17}
#arroe_block li:nth-child(20n+18){--hue:18}
#arroe_block li:nth-child(20n+19){--hue:19}
#arroe_block li:nth-child(20n+20){--hue:20}
@media (min-width: 550px) and (max-width: 899px) {
#arroe_block li{margin:1rem;width:calc(50% - 4rem);float:left;min-height:var(--height)}
#arroe_block li:nth-child(4n+3),#arroe_block li:nth-child(4n+4){float:right}
#arroe_block li:nth-child(4n+1)::before{top:calc(var(--height)/2 + var(--unit)/2);left:100%}
#arroe_block li:nth-child(4n+1)::after{top:calc(var(--height)/2);left:calc(100% + (var(--unit)));border:var(--unit) solid transparent;border-left-color:inherit}
#arroe_block li:nth-child(4n+3)::before{top:calc(var(--height)/2 + var(--unit)/2);left:-1rem}
#arroe_block li:nth-child(4n+3)::after{top:calc(var(--height)/2);left:-3rem;border:var(--unit) solid transparent;border-right-color:inherit}
}
@media (min-width: 900px) and (max-width: 1199px) {
#arroe_block li{margin:1rem;width:calc(33.33% - 4rem);float:left;min-height:7rem}
#arroe_block li:nth-child(6n+4),#arroe_block li:nth-child(6n+5),#arroe_block li:nth-child(6n+6){float:right}
#arroe_block li:nth-child(6n+1)::before,#arroe_block li:nth-child(6n+2)::before{top:calc(var(--height)/2 + var(--unit)/2);left:100%}
#arroe_block li:nth-child(6n+1)::after,#arroe_block li:nth-child(6n+2)::after{top:3.5rem;left:calc(100% + (var(--unit)));border:var(--unit) solid transparent;border-left-color:inherit}
#arroe_block li:nth-child(6n+4)::before,#arroe_block li:nth-child(6n+5)::before{top:calc(var(--height)/2 + var(--unit)/2);left:-1rem}
#arroe_block li:nth-child(6n+4)::after,#arroe_block li:nth-child(6n+5)::after{top:calc(var(--height)/2);left:-3rem;border:var(--unit) solid transparent;border-right-color:inherit}
}
@media (min-width: 1200px) {
#arroe_block ol{max-width:1600px;margin:0 auto}
#arroe_block li{margin:1rem;width:calc(25% - 4rem);float:left;min-height:7rem}
#arroe_block li:nth-child(8n+5),#arroe_block li:nth-child(8n+6),#arroe_block li:nth-child(8n+7),#arroe_block li:nth-child(8n+8){float:right}
#arroe_block li:nth-child(8n+1)::before,#arroe_block li:nth-child(8n+2)::before,#arroe_block li:nth-child(8n+3)::before{top:calc(var(--height)/2 + var(--unit)/2);left:100%}
#arroe_block li:nth-child(8n+1)::after,#arroe_block li:nth-child(8n+2)::after,#arroe_block li:nth-child(8n+3)::after{top:calc(var(--height)/2);left:calc(100% + (var(--unit)));border:var(--unit) solid transparent;border-left-color:inherit}
#arroe_block li:nth-child(8n+5)::before,#arroe_block li:nth-child(8n+6)::before,#arroe_block li:nth-child(8n+7)::before{top:calc(var(--height)/2 + var(--unit)/2);left:-1rem}
#arroe_block li:nth-child(8n+5)::after,#arroe_block li:nth-child(8n+6)::after,#arroe_block li:nth-child(8n+7)::after{top:calc(var(--height)/2);left:-3rem;border:var(--unit) solid transparent;border-right-color:inherit}
}

Поделиться с друзьями


Похожие статьи:

Подборка слайдеров для сайта на чистом CSS
Кнопка для сайта в стиле минимализм
Градиент для кнопок на сайте
3D текст с мультяшным эффектом на CSS
CSS анимация в стиле рентгена
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File
Стилизация checkbox и radio

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte
    Требуется программист