pure css mindmap with nest list element.

index.html

<div class="topic">
  topics
	<ul>	
		<li>this is a long subtopic and conetent</li>
		<li>topic2</li>
		<li>topic3</li>
		<li>topic4</li>
		<li>topic5</li>
		<li>topic6 it's also very long</li>
		<li>topic7</li>
		<li>topic8</li>
		<li>topic9</li>
		<li>topic10</li>
		<li>topic11</li>
		<li>topic12</li>
		<li>topic13</li>
	</ul>
</div>

style.css

.topic{
  display: block; position: relative; z-index: 1;
	padding:.5em; 
	width: 25em;
	border:solid 1px black; 
	text-align:right; vertical-align: middle; white-space:nowrap; 
	background: pink;
}
.topic:before{
	content: ""; display: block; background: yellow; position: absolute; z-index: -1;
	top: 0; right: 0; bottom: 0; left: 0;
	margin:auto;
	width: 5em; height: 2.5em;
}

ul{
	display: inline-block; position:relative; overflow: hidden; z-index: -2; 
	left: -100%;
	margin:0 -100% 0 45%; padding:0; /*position */
	width: 100%;
	vertical-align: middle;
	background:rgba(255,0,0,.4);
}
ul:before{
	0content: ""; display: block; position: absolute; z-index: 3;
	left:0; right: 0;
	margin: auto;
	width: .4em; height: 100%;
	background: white;
}
ul>li{
	display:block; 0position: relative; float: right;
	margin:.25em 0; padding: .5em;	
	width:8em; height:auto; 
	vertical-align: top; white-space:normal; word-wrap: break-word;  text-align: center; 
	background:rgba(0,0,0,.3); 0background: gray;
}
ul>li:after{
	content: ""; display:block; position: absolute; z-index: -1;
	border:solid gray 0;
	width:auto; height:50%;	margin-bottom: -50%;
	margin: auto;	
}



ul>li:nth-child(even){
	float: left; clear: left;
}

ul>li:nth-child(even):after{
	left: 0; right:50%;
	margin-top:0;
	border-width: .2em ; border-left-width: 0;
	border-radius:0 1em 1em 0;
}


ul>li:nth-child(odd){
	float: right; clear: right;
}
ul>li:nth-child(odd):after{
	right: 0; left:50%; /*negative for overwidth ccenter*/
	border-width: .2em; border-right-width: 0; 
	border-radius:1em 0 0 1em;
}

/* 

css half select skill 

by Defims

1 *   #
2  * #
3   @
4  # *
5 #   *

1&5 set
2&4 set
3&3 set   3 cover 3
4&2 set   4 cover 2 2 cover 4
5&1 set   5 cover 1 1 cover 5

because the css cover feather it seems like start from the half (3 for odd)
and no matter how many children there is (below max), it works fine
*/

0ul>li:nth-child(10):after{ margin-top: -50%; border-width: 0 .2em .2em 0; border-top-right-radius: 0; border-top-left-radius: 1em; border-color:blue;}

/* */
ul>li:nth-child(odd):nth-last-child(2):after,
ul>li:nth-child(odd):nth-last-child(1):after  { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 0em 0 0 0; z-index:1;}
ul>li:nth-child(odd):nth-child(1):after       { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 0em; z-index:1;}
ul>li:nth-child(even):nth-last-child(1):after,
ul>li:nth-child(even):nth-last-child(2):after { margin-top: 0;    border-width: .2em .2em 0 0; border-radius: 0 0em 0 0; z-index:1;}
ul>li:nth-child(even):nth-child(2):after      { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 0em 0; z-index:1;}


ul>li:nth-child(odd):nth-last-child(4):after,
ul>li:nth-child(odd):nth-last-child(3):after  { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 1em 0 0 0; z-index:2;}
ul>li:nth-child(odd):nth-child(3):after       { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 1em; z-index:2;}
ul>li:nth-child(even):nth-last-child(3):after,
ul>li:nth-child(even):nth-last-child(4):after { margin-top: 0;    border-width: .2em .2em 0 0; border-radius: 0 1em 0 0; z-index:2;}
ul>li:nth-child(even):nth-child(4):after      { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 1em 0; z-index:2;}

ul>li:nth-child(odd):nth-last-child(6):after,
ul>li:nth-child(odd):nth-last-child(5):after  { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 2em 0 0 0; z-index:3;}
ul>li:nth-child(odd):nth-child(5):after       { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 2em; z-index:3;}
ul>li:nth-child(even):nth-last-child(5):after,
ul>li:nth-child(even):nth-last-child(6):after { margin-top: 0;    border-width: .2em .2em 0 0; border-radius: 0 2em 0 0; z-index:3;}
ul>li:nth-child(even):nth-child(6):after      { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 2em 0; z-index:3;}

ul>li:nth-child(odd):nth-last-child(8):after,
ul>li:nth-child(odd):nth-last-child(7):after  { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 3em 0 0 0; z-index:4;}
ul>li:nth-child(odd):nth-child(7):after       { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 3em; z-index:4;}
ul>li:nth-child(even):nth-last-child(7):after,
ul>li:nth-child(even):nth-last-child(8):after { margin-top: 0;    border-width: .2em .2em 0 0; border-radius: 0 3em 0 0; z-index:4;}
ul>li:nth-child(even):nth-child(8):after      { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 3em 0; z-index:4;}

ul>li:nth-child(odd):nth-last-child(10):after,
ul>li:nth-child(odd):nth-last-child(9):after  { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 4em 0 0 0; z-index:5;}
ul>li:nth-child(odd):nth-child(9):after       { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 4em; z-index:5;}
ul>li:nth-child(even):nth-last-child(9):after,
ul>li:nth-child(even):nth-last-child(10):after{ margin-top: 0;    border-width: .2em .2em 0 0; border-radius: 0 4em 0 0; z-index:5;}
ul>li:nth-child(even):nth-child(10):after     { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 4em 0; z-index:5;}

ul>li:nth-child(odd):nth-last-child(12):after,
ul>li:nth-child(odd):nth-last-child(11):after { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 5em 0 0 0; z-index:6;}
ul>li:nth-child(odd):nth-child(11):after      { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 5em; z-index:6;}
ul>li:nth-child(even):nth-last-child(11):after,
ul>li:nth-child(even):nth-last-child(12):after{ margin-top: 0;    border-width: .2em .2em 0 0; border-radius: 0 5em 0 0; z-index:6;}
ul>li:nth-child(even):nth-child(12):after     { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 5em 0; z-index:6;}

ul>li:nth-child(odd):nth-last-child(14):after,
ul>li:nth-child(odd):nth-last-child(13):after { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 6em 0 0 0; z-index:7;}
ul>li:nth-child(odd):nth-child(13):after      { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 6em; z-index:7;}
ul>li:nth-child(even):nth-last-child(13):after,
ul>li:nth-child(even):nth-last-child(14):after{ margin-top: 0;    border-width: .2em .2em 0 0; border-radius: 0 6em 0 0; z-index:7;}
ul>li:nth-child(even):nth-child(14):after     { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 6em 0; z-index:7;}

ul>li:nth-child(odd):nth-last-child(16):after,
ul>li:nth-child(odd):nth-last-child(15):after { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 7em 0 0 0; z-index:8;}
ul>li:nth-child(odd):nth-child(15):after      { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 7em; z-index:8;}
ul>li:nth-child(even):nth-last-child(15):after,
ul>li:nth-child(even):nth-last-child(16):after{ margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 0 7em 0 0; z-index:8;}
ul>li:nth-child(even):nth-child(16):after     { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 7em 0; z-index:8;}

ul>li:nth-child(odd):nth-last-child(18):after,
ul>li:nth-child(odd):nth-last-child(17):after { margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 8em 0 0 0; z-index:9;}
ul>li:nth-child(odd):nth-child(17):after      { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 8em; z-index:9;}
ul>li:nth-child(even):nth-last-child(17):after,
ul>li:nth-child(even):nth-last-child(18):after{ margin-top: 0;    border-width: .2em 0 0 .2em; border-radius: 0 8em 0 0; z-index:9;}
ul>li:nth-child(even):nth-child(18):after     { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 8em 0; z-index:9;}

/*fixed*/
ul>li:nth-child(1):after,
ul>li:nth-child(2):after,
ul>li:nth-last-child(1):after,
ul>li:nth-last-child(2):after{
	z-index: 9999 !important;
}
ul>li:nth-child(1):before,
ul>li:nth-child(2):before,
ul>li:nth-last-child(1):before,
ul>li:nth-last-child(2):before{
	content: ""; display: block; position: absolute; z-index: 9998;
	border-left:solid white .2em; width: 0; height: 50%;
}

ul>li:nth-child(1):before{ left:50%; top:0; }
ul>li:nth-child(2):before{ right:50%; top:0; }
ul>li:nth-last-child(1):before{ left:50%; bottom:0; }
ul>li:nth-last-child(2):before{ right:50%; bottom:0; }

/*decoration*/
.topic{ background: white; border: none; font-family: "Verdana"; color:white; text-shadow:0 0 .2em hsla(0,0%,0%,.5);}
.topic:before{ 
	border-radius: .5em;
	box-shadow:inset 0 0 .2em hsla(0,0%,50%,.9),0 0 .4em 0em hsla(0,0%,50%,.9); 
	border: solid rgba(0,0,0,.3) 1px; 
	background: hsl(0,0%,30%); 
}
ul{ background: white; }
ul>li{
	background: transparent; color: black;
}
ul>li:after{border-color:hsl(0, 0%, 71%) !important; }