Верстка блоков со стрелочками
Иногда нужно показать на сайте последовательность действий или цепочку (хронологию) событий. Для этого подойдет следующая верстка на HTML и CSS:
Скачать архив
Содержание архива:
HTML разметка
1 день
Сегодня я ничего не делал
2 день
Сегодня я опять ничего не делал
3 день
Сегодня я опять ничего не делал
4 день
Сегодня я опять ничего не делал
5 день
Сегодня я опять ничего не делал
6 день
Сегодня я опять ничего не делал
7 день
Сегодня я опять ничего не делал
8 день
Сегодня я опять ничего не делал
9 день
Сегодня я опять ничего не делал
10 день
Сегодня я опять ничего не делал
11 день
Сегодня я опять ничего не делал
12 день
Сегодня я опять ничего не делал
13 день
Сегодня я опять ничего не делал
14 день
Сегодня я опять ничего не делал
15 день
Сегодня я опять ничего не делал
16 день
Сегодня я опять ничего не делал
17 день
Сегодня я опять ничего не делал
18 день
Сегодня я опять ничего не делал
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}
}
Комментарии ()