Created
August 20, 2012 15:55
-
-
Save defims/3405341 to your computer and use it in GitHub Desktop.
pure css mindmap with nest list element.
This file contains hidden or 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 hidden or 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>li{ | |
| display:block; position: 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:before, | |
| ul>li:after{ | |
| content: ""; display:block; position: absolute; z-index: -1; | |
| border:solid white 0; | |
| width:0; height:20em; | |
| top:0; right: 0; bottom:auto; left:0; | |
| margin: auto; | |
| } | |
| ul>li:nth-child(even){ | |
| float: left; clear: left; | |
| } | |
| ul>li:nth-child(even):before, | |
| ul>li:nth-child(even):after{ | |
| right: -45em; left:-37em; /*negative for overwidth ccenter*/ | |
| border-width: 0 .2em 0 0; | |
| } | |
| ul>li:nth-child(odd){ | |
| float: right; clear: right; | |
| } | |
| ul>li:nth-child(odd):before, | |
| ul>li:nth-child(odd):after{ | |
| right: -37em; left:-45em; /*negative for overwidth ccenter*/ | |
| border-width: 0 0 0 .2em; | |
| } | |
| /* | |
| 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 | |
| */ | |
| /*select half even last-child*/ | |
| ul>li:nth-child(odd):nth-last-child(1), | |
| ul>li:nth-child(odd):nth-last-child(2){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(1):before, | |
| ul>li:nth-child(odd):nth-last-child(2):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(1):after, | |
| ul>li:nth-child(odd):nth-last-child(2):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 1em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(1){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(1):before{ display: block; width: 1em;} | |
| ul>li:nth-child(odd):nth-child(1):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 1em; height: 1em; border-radius:0 0 0 1em; } | |
| ul>li:nth-child(odd):nth-last-child(3), | |
| ul>li:nth-child(odd):nth-last-child(4){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(3):before, | |
| ul>li:nth-child(odd):nth-last-child(4):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(3):after, | |
| ul>li:nth-child(odd):nth-last-child(4):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 2em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(3){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(3):before{ display: block; width: 2em;} | |
| ul>li:nth-child(odd):nth-child(3):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 2em; height: 1em; border-radius:0 0 0 1em;} | |
| ul>li:nth-child(odd):nth-last-child(5), | |
| ul>li:nth-child(odd):nth-last-child(6){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(5):before, | |
| ul>li:nth-child(odd):nth-last-child(6):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(5):after, | |
| ul>li:nth-child(odd):nth-last-child(6):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 3em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(5){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(5):before{ display: block; width: 3em; } | |
| ul>li:nth-child(odd):nth-child(5):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 3em; height: 1em; border-radius:0 0 0 1em;} | |
| ul>li:nth-child(odd):nth-last-child(7), | |
| ul>li:nth-child(odd):nth-last-child(8){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(7):before, | |
| ul>li:nth-child(odd):nth-last-child(8):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(7):after, | |
| ul>li:nth-child(odd):nth-last-child(8):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 4em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(7){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(7):before{ display: block; width: 4em; } | |
| ul>li:nth-child(odd):nth-child(7):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 4em; height: 1em; border-radius:0 0 0 1em;} | |
| ul>li:nth-child(odd):nth-last-child(9), | |
| ul>li:nth-child(odd):nth-last-child(10){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(9):before, | |
| ul>li:nth-child(odd):nth-last-child(10):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(9):after, | |
| ul>li:nth-child(odd):nth-last-child(10):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 5em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(9){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(9):before{ display: block; width: 5em; } | |
| ul>li:nth-child(odd):nth-child(9):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 5em; height: 1em; border-radius:0 0 0 1em; } | |
| ul>li:nth-child(odd):nth-last-child(11), | |
| ul>li:nth-child(odd):nth-last-child(12){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(11):before, | |
| ul>li:nth-child(odd):nth-last-child(12):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(11):after, | |
| ul>li:nth-child(odd):nth-last-child(12):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 6em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(11){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(11):before{ display: block; width: 6em; } | |
| ul>li:nth-child(odd):nth-child(11):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 6em; height: 1em; border-radius:0 0 0 1em; } | |
| ul>li:nth-child(odd):nth-last-child(13), | |
| ul>li:nth-child(odd):nth-last-child(14){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(13):before, | |
| ul>li:nth-child(odd):nth-last-child(14):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(13):after, | |
| ul>li:nth-child(odd):nth-last-child(14):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 7em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(13){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(13):before{ display: block; width: 7em; } | |
| ul>li:nth-child(odd):nth-child(13):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 7em; height: 1em; border-radius:0 0 0 1em; } | |
| ul>li:nth-child(odd):nth-last-child(15), | |
| ul>li:nth-child(odd):nth-last-child(16){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(15):before, | |
| ul>li:nth-child(odd):nth-last-child(16):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(15):after, | |
| ul>li:nth-child(odd):nth-last-child(16):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 8em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(15){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(15):before{ display: block; width: 8em; } | |
| ul>li:nth-child(odd):nth-child(15):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 8em; height: 1em; border-radius:0 0 0 1em; } | |
| ul>li:nth-child(odd):nth-last-child(17), | |
| ul>li:nth-child(odd):nth-last-child(18){ background:lightblue; } | |
| ul>li:nth-child(odd):nth-last-child(17):before, | |
| ul>li:nth-child(odd):nth-last-child(18):before{ display: none; } | |
| ul>li:nth-child(odd):nth-last-child(17):after, | |
| ul>li:nth-child(odd):nth-last-child(18):after{ top:50%; bottom:auto; border-width: .2em 0 0 .2em; width: 9em; height:20em; border-radius:1em 0 0 0; } | |
| ul>li:nth-child(odd):nth-child(17){ background:gold; } | |
| ul>li:nth-child(odd):nth-child(17):before{ display: block; width: 9em; } | |
| ul>li:nth-child(odd):nth-child(17):after{ top:auto; bottom:50%; border-width: 0 0 .2em .2em; width: 9em; height: 1em; border-radius:0 0 0 1em; } | |
| /*left column*/ | |
| ul>li:nth-child(even):nth-last-child(2), | |
| ul>li:nth-child(even):nth-last-child(1){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(2):before, | |
| ul>li:nth-child(even):nth-last-child(1):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(2):after, | |
| ul>li:nth-child(even):nth-last-child(1):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 1em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(2){ background:gold; } | |
| ul>li:nth-child(even):nth-child(2):before{ display: block; width: 1em;} | |
| ul>li:nth-child(even):nth-child(2):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 1em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(4), | |
| ul>li:nth-child(even):nth-last-child(3){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(4):before, | |
| ul>li:nth-child(even):nth-last-child(3):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(4):after, | |
| ul>li:nth-child(even):nth-last-child(3):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 2em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(4){ background:gold; } | |
| ul>li:nth-child(even):nth-child(4):before{ display: block; width: 2em;} | |
| ul>li:nth-child(even):nth-child(4):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 2em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(6), | |
| ul>li:nth-child(even):nth-last-child(5){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(6):before, | |
| ul>li:nth-child(even):nth-last-child(5):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(6):after, | |
| ul>li:nth-child(even):nth-last-child(5):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 3em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(6){ background:gold; } | |
| ul>li:nth-child(even):nth-child(6):before{ display: block; width: 3em; } | |
| ul>li:nth-child(even):nth-child(6):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 3em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(8), | |
| ul>li:nth-child(even):nth-last-child(7){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(8):before, | |
| ul>li:nth-child(even):nth-last-child(7):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(8):after, | |
| ul>li:nth-child(even):nth-last-child(7):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 4em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(8){ background:gold; } | |
| ul>li:nth-child(even):nth-child(8):before{ display: block; width: 4em; } | |
| ul>li:nth-child(even):nth-child(8):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 4em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(10), | |
| ul>li:nth-child(even):nth-last-child(9){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(10):before, | |
| ul>li:nth-child(even):nth-last-child(9):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(10):after, | |
| ul>li:nth-child(even):nth-last-child(9):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 5em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(10){ background:gold; } | |
| ul>li:nth-child(even):nth-child(10):before{ display: block; width: 5em; } | |
| ul>li:nth-child(even):nth-child(10):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 5em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(12), | |
| ul>li:nth-child(even):nth-last-child(11){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(12):before, | |
| ul>li:nth-child(even):nth-last-child(11):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(12):after, | |
| ul>li:nth-child(even):nth-last-child(11):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 6em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(12){ background:gold; } | |
| ul>li:nth-child(even):nth-child(12):before{ display: block; width: 6em; } | |
| ul>li:nth-child(even):nth-child(12):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 6em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(14), | |
| ul>li:nth-child(even):nth-last-child(13){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(14):before, | |
| ul>li:nth-child(even):nth-last-child(13):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(14):after, | |
| ul>li:nth-child(even):nth-last-child(13):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 7em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(14){ background:gold; } | |
| ul>li:nth-child(even):nth-child(14):before{ display: block; width: 7em; } | |
| ul>li:nth-child(even):nth-child(14):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 7em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(16), | |
| ul>li:nth-child(even):nth-last-child(15){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(16):before, | |
| ul>li:nth-child(even):nth-last-child(15):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(16):after, | |
| ul>li:nth-child(even):nth-last-child(15):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 8em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(16){ background:gold; } | |
| ul>li:nth-child(even):nth-child(16):before{ display: block; width: 8em; } | |
| ul>li:nth-child(even):nth-child(16):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 8em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(18), | |
| ul>li:nth-child(even):nth-last-child(17){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(18):before, | |
| ul>li:nth-child(even):nth-last-child(17):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(18):after, | |
| ul>li:nth-child(even):nth-last-child(17):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 9em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(18){ background:gold; } | |
| ul>li:nth-child(even):nth-child(18):before{ display: block; width: 9em; } | |
| ul>li:nth-child(even):nth-child(18):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 9em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:nth-child(even):nth-last-child(20), | |
| ul>li:nth-child(even):nth-last-child(19){ background:lightblue; } | |
| ul>li:nth-child(even):nth-last-child(20):before, | |
| ul>li:nth-child(even):nth-last-child(19):before{ display: none; } | |
| ul>li:nth-child(even):nth-last-child(20):after, | |
| ul>li:nth-child(even):nth-last-child(19):after{ top:50%; bottom:auto; border-width: .2em .2em 0 0; width: 10em; height:20em; border-radius:0 1em 0 0; } | |
| ul>li:nth-child(even):nth-child(20){ background:gold; } | |
| ul>li:nth-child(even):nth-child(20):before{ display: block; width: 10em; } | |
| ul>li:nth-child(even):nth-child(20):after{ top:auto; bottom:50%; border-width: 0 .2em .2em 0; width: 10em; height: 1em; border-radius:0 0 1em 0; } | |
| ul>li:after{ border-color:gray; } | |
| /*decoration*/ | |
| .topic{ background: white; border: none; font-family: "Verdana"; } | |
| .topic:before{ border-radius: 1em; box-shadow:inset 0 0 .2em rgba(0,0,0,.5); border: solid rgba(0,0,0,.3) 1px; background: gold; } | |
| ul{ background: white; } | |
| ul>li{ box-shadow: inset 0 0 .2em rgba(0,0,0,.5); border-radius: .25em; } | |
| ul>li:after{ } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment