network attempt

dabblet.css

/** * network attempt */

ol, ul {
  list-style: none; 
}

.network {
  position: relative;
  top: 20px;
  left: 40px;
  width: 650px;
  height: 440px;
  border: 1px solid black;
}

.caretaker, .client {
  background-color: white;
  width: 100px;
  height: 40px;
  border: 1px solid green;
  border-radius: 1em;
  line-height:40px;
  text-align:center;
  position: absolute;
  margin-left: -50px;
  margin-top:  -20px;
}

.client {
  top: 220px;
  left: 250px;
}

.informal.caretaker {
  font-style:italic;
}

.informal-list li:nth-child(1) {
  top: 348px;
  left: 403px;
}

.informal-list li:nth-child(2) {
  left:284px;
  top:416px;
}

.informal-list li:nth-child(3) {
  left:150px;
  top:393px;
}

.informal-list li:nth-child(4) {
  left:62px;
  top:288px;
}
.informal-list li:nth-child(5) {
  left:62px;
  top:151px;
}

.informal-list li:nth-child(6) {
  left:150px;
  top:47px;
}

.informal-list li:nth-child(7) {
  left:284px;
  top:23px;
}

.informal-list li:nth-child(8) {
  left:403px;
  top:91px;
}

.informal-list li:nth-child(9) {
  left:450px;
  top:220px;
}

.formal-list li {
  font-weight:bold;
  right: 0px;
}

.formal-list li:nth-child(1) {
  top: 25px;
}

.formal-list li:nth-child(2) {
  top: 70px;
}

.formal-list li:nth-child(3) {
  top: 115px;
}

.relation {
  width: 200px;
  border-bottom:1px solid black;
  height: 0px;
  display:block;
  position:absolute;
  top: 220px;  
  left: 150px;
  z-index:-1;
  margin-left:0px;

}

.relations li:nth-child(1) {
  transform:rotate(40deg) translate(100px, 0px);
}

.relations li:nth-child(2) {
  transform:rotate(80deg) translate(100px, 0px);

}

.relations li:nth-child(3) {
  transform:rotate(120deg) translate(100px, 0px);

}

.relations li:nth-child(4) {
  transform:rotate(160deg) translate(100px, 0px);

}

.relations li:nth-child(5) {
  transform:rotate(200deg) translate(100px, 0px);

}

.relations li:nth-child(6) {
  transform:rotate(240deg) translate(100px, 0px);

}

.relations li:nth-child(7) {
  transform:rotate(280deg) translate(100px, 0px);

}

.relations li:nth-child(8) {
  transform:rotate(320deg) translate(100px, 0px);

}

.relations li:nth-child(9) {
  transform:rotate(0deg) translate(100px, 0px);

}

dabblet.html

<div class="network">
	<ul class="client-list">
		<li class="client">John</li>
	</ul>
	<ul class="formal-list">
		<li class="formal caretaker">Anna</li>
		<li class="formal caretaker">Penny</li>
		<li class="formal caretaker">Leonard</li>
	</ul>
	<ul class="informal-list">	
		<li class="informal caretaker">Steve</li>
		<li class="informal caretaker">Jane</li>
		<li class="informal caretaker">Stacey</li>
		<li class="informal caretaker">Katy</li>		
		<li class="informal caretaker">Keith</li>
		<li class="informal caretaker">Melissa</li>
		<li class="informal caretaker">Vincent</li>		
		<li class="informal caretaker">Harvey</li>
		<li class="informal caretaker">Christine</li>
	</ul>
	<ul class="relations">
	  <li class="relation"></li>
	  <li class="relation"></li>
	  <li class="relation"></li>
	  <li class="relation"></li>
	  <li class="relation"></li>
	  <li class="relation"></li>
	  <li class="relation"></li>
	  <li class="relation"></li>
	  <li class="relation"></li>
	</ul>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}