index.html

<div class="topic">
  topic
	<ul>	
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

style.css

body{
  padding:17em;
}


.topic{
	display: block; position: relative;
	padding:1em 0;
	width: 14em; height: 1em; line-height: 1em;
	border:solid 1px black;
	text-align:center; vertical-align: middle; 
	background: pink;
}

ul{
	display: block; 0position: absolute;
	margin-top:-.5em;
	0width: 100%;
	0top:1.5em;
	0margin:0; padding:0; 
	text-align: justify;
	0background:rgba(255,0,0,.4);
	counter-reset:increment;
}


ul>li{
	display:block; position: relative; 
	margin:.25em auto; padding: .25em 0;	
	width:7em; height:1em; 
	vertical-align: bottom; white-space:nowrap; 
	background:rgba(0,0,0,.3); background: gray;
	counter-increment:increment;
}
ul>li:after{
	content: ""; display: inline-block; position: relative; z-index: -1;
	border:solid black 0;
	width:125%;  
	margin:0 .25em; /*horizon margin*/
	height:1em;	
}

/*two column*/
ul>li:nth-child(even){ margin-top:-1.75em; }

ul>li:nth-child(4n+1),
ul>li:nth-child(4n+3){ 
	left:125%; 
	text-align: right; 
}
ul>li:nth-child(4n+1):after{
	right: 125%; 
	margin-right:-125%;
	border-width: 0 0 .2em .2em; border-color:blue;
	margin-top:-9999em;
}
ul>li:nth-child(4n+3):after{	
	float: right;
	right: 125%;
	margin-right:-125%; 
	border-width: .2em 0 0 .2em; border-color:darkgray;
	margin-bottom: 9999em;
}


ul>li:nth-child(4n+2),
ul>li:nth-child(4n+4){ 
	right:125%; 
	text-align: left; 
}
ul>li:nth-child(4n+2):after{
	left: 125%;	
	margin-left:-125%; 
	border-width: 0 .2em .2em 0; border-color:green;
	margin-top:-9999em;
}
ul>li:nth-child(4n+4):after{	
	float: left;
	left: 125%;	
	margin-left:-125%; 
	border-width: .2em .2em 0 0; border-color:black;
	margin-bottom: 9999em;
}


ul>li:before{
	content: counter(increment) ; display: block; position: absolute;
	left: 0; right: 0;
	text-align: center; color:white; font-family: "Georgia"
}







/*user defined*/

/*long enough*/
ul>li:nth-child(4n+1),ul>li:nth-child(4n+3){ left: 125%; }
ul>li:nth-child(4n+1):after,ul>li:nth-child(4n+3):after{ right: 200%; margin-right: -200%; width:200%; }

ul>li:nth-child(4n+2),ul>li:nth-child(4n+4){ right: 125%; }
ul>li:nth-child(4n+2):after,ul>li:nth-child(4n+4):after{ left: 200%; margin-left: -200%; width:200%; }


/*change order*/
ul>li:nth-child(4n){ margin-bottom: -1.75em; }

/**/
ul>li:nth-child(3),ul>li:nth-child(4){ bottom:3.5em; }
ul>li:nth-child(7),ul>li:nth-child(8){ bottom:7em; }
ul>li:nth-child(11),ul>li:nth-child(12){ bottom:10.5em; }
ul>li:nth-child(15),ul>li:nth-child(16){ bottom:14em; }
ul>li:nth-child(19),ul>li:nth-child(20){ bottom:17.5em; }
ul>li:nth-child(23),ul>li:nth-child(24){ bottom:21em; }
ul>li:nth-child(27),ul>li:nth-child(28){ bottom:24.5em; }
ul>li:nth-child(31),ul>li:nth-child(32){ bottom:28em; }
ul>li:nth-child(35),ul>li:nth-child(36){ bottom:31.5em; }
ul>li:nth-child(39),ul>li:nth-child(40){ bottom:35em; }
ul>li:nth-child(33),ul>li:nth-child(44){ bottom:38.5em; }
ul>li:nth-child(47),ul>li:nth-child(48){ bottom:42em; }
ul>li:nth-child(51),ul>li:nth-child(52){ bottom:45.5em; }
ul>li:nth-child(55),ul>li:nth-child(56){ bottom:49em; }
ul>li:nth-child(59),ul>li:nth-child(60){ bottom:52.5em; }
/**/

/*link height increment 1.25em = 1em +.25em height + margin +  padding*/
ul>li:nth-child(1):after,ul>li:nth-child(2):after,ul>li:nth-child(3):after,ul>li:nth-child(4):after{ height: 1.25em; }
ul>li:nth-child(5):after,ul>li:nth-child(6):after,ul>li:nth-child(7):after,ul>li:nth-child(8):after{ height: 3em; }
ul>li:nth-child(9):after,ul>li:nth-child(10):after,ul>li:nth-child(11):after,ul>li:nth-child(12):after{ height: 4.75em; }
ul>li:nth-child(13):after,ul>li:nth-child(14):after,ul>li:nth-child(15):after,ul>li:nth-child(16):after{ height: 6.5em; }
ul>li:nth-child(17):after,ul>li:nth-child(18):after,ul>li:nth-child(19):after,ul>li:nth-child(20):after{ height: 8.25em; }
ul>li:nth-child(21):after,ul>li:nth-child(22):after,ul>li:nth-child(23):after,ul>li:nth-child(24):after{ height: 10em; }
ul>li:nth-child(25):after,ul>li:nth-child(26):after,ul>li:nth-child(27):after,ul>li:nth-child(28):after{ height: 11.75em; }
ul>li:nth-child(29):after,ul>li:nth-child(30):after,ul>li:nth-child(31):after,ul>li:nth-child(32):after{ height: 13.5em; }
ul>li:nth-child(33):after,ul>li:nth-child(34):after,ul>li:nth-child(35):after,ul>li:nth-child(36):after{ height: 15.25em; }
ul>li:nth-child(37):after,ul>li:nth-child(38):after,ul>li:nth-child(39):after,ul>li:nth-child(40):after{ height: 17em; }
ul>li:nth-child(41):after,ul>li:nth-child(42):after,ul>li:nth-child(43):after,ul>li:nth-child(44):after{ height: 18.75em; }
ul>li:nth-child(45):after,ul>li:nth-child(46):after,ul>li:nth-child(47):after,ul>li:nth-child(48):after{ height: 20.5em; }
ul>li:nth-child(49):after,ul>li:nth-child(50):after,ul>li:nth-child(51):after,ul>li:nth-child(52):after{ height: 22.25em; }
ul>li:nth-child(53):after,ul>li:nth-child(54):after,ul>li:nth-child(55):after,ul>li:nth-child(56):after{ height: 24em; }
ul>li:nth-child(57):after,ul>li:nth-child(58):after,ul>li:nth-child(59):after,ul>li:nth-child(60):after{ height: 25.75em; }
/**/




/*link style*/
ul>li:nth-child(4n+1):after{ border-bottom-left-radius: 100%; border-left-width:.2em; border-bottom-width:.1em; }
ul>li:nth-child(4n+2):after{ border-bottom-right-radius: 100%; border-right-width:.2em; border-bottom-width:.1em; }
ul>li:nth-child(4n+3):after{ border-top-left-radius: 100%; border-left-width:.2em; border-top-width:.1em; }
ul>li:nth-child(4n+4):after{ border-top-right-radius: 100%; border-right-width:.2em; border-top-width:.1em; }
/**/


/*decoration*/
.topic{ border-radius: 1em;	box-shadow: 0 0 1em rgba(0,0,0,.5),inset 0 0 2px white; }
ul>li{ box-shadow: inset 0 0 .2em rgba(0,0,0,.5); 	border-radius: .25em; }
ul>li:nth-child(4n):after{ box-shadow: .1em -.1em .1em rgba(0,0,0,.2) , inset  -.1em .1em .1em rgba(0,0,0,.2); }
ul>li:nth-child(4n+1):after{ box-shadow: -.1em .1em .1em rgba(0,0,0,.2) , inset  .1em -.1em .1em rgba(0,0,0,.2); }
ul>li:nth-child(4n+2):after{ box-shadow: .1em .1em .1em rgba(0,0,0,.2) , inset  -.1em -.1em .1em rgba(0,0,0,.2); }
ul>li:nth-child(4n+3):after{ box-shadow: -.1em -.1em .1em rgba(0,0,0,.2) , inset  .1em .1em .1em rgba(0,0,0,.2); }
/**/