-
-
Save QiaoXingLi/2f2d8a31f2bc83e21232 to your computer and use it in GitHub Desktop.
pure css mindmap with nest list element.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment