List with circles and rectangles - html

Question

I try to implement the following list known from Word (SmartArt).
The lines can be straight.
Currently this is my solution:
HTML:
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left;"class="circleInhouse"></div>
<div style="float: left; width: 80%;">
<p class="boxInhouse">
Strategischer Verkauf <Seminarthemen>
</p>
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left;"class="circleInhouse"></div>
<div style="float: left; width: 80%;">
<p class="boxInhouse">
Prozessorientierte Verkaufstechnik <Seminarthemen>
</p>
</div>
</div>
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left;"class="circleInhouse"></div>
<div style="float: left; width: 80%;">
<p class="boxInhouse">
Team-Selling <Seminarthemen>
</p>
</div>
</div>
<div style="clear: both;"></div>
<div>
<div style="float: left; text-align: center; width: 55px;">
<hr width="2" size="20" class="hrInhouse">
</div>
</div>
<div style="clear: both;"></div>
CSS:
.box{
background: #415985;
color: white;
padding: 10px;
font-size: 12px;
}
.circle{
width: 50px;
height: 50px;
border-radius: 50px;
border: 2px solid #415985;
}
.hr{
padding: 0;
margin-bottom: 0;
margin-top: -5px;
}
Inline CSS will be outsourced to the CSS file.
However I'm not fully satisfied as the lines don't fit exactly to the circles and the boxes/rectangles have to be moved "behind" the circles.
How can this be done? I'm looking for a clean solution.

Answer 1

You can just use li's and pseudo-elements to do this
ul{
list-style:none;
}
li{
display:block;
width:200px;
height:70px;
padding:20px;
padding-left:80px;
font-size:28px;
color:#fff;
background:dodgerblue;
margin:10px 0;
position:relative;
}
li:after{
position:absolute;
content:"";
width:100px;
height:100px;
background:#fff;
border:5px solid dodgerblue;
border-radius:50%;
top:0px;
left:-50px;
}
ul:before{
content:"";
position:absolute;
width:5px;
height:500px;
background:#fff;
border:2px solid dodgerblue;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
This one has a bit more curved lines like you asked
ul{
list-style:none;
}
li{
display:block;
width:200px;
height:70px;
padding:20px;
padding-left:80px;
font-size:28px;
color:#fff;
background:dodgerblue;
margin:10px 0;
position:relative;
}
li:after{
position:absolute;
content:"";
width:100px;
height:100px;
background:#fff;
border:5px solid dodgerblue;
border-radius:50%;
top:0px;
left:-50px;
}
ul:before{
content:"";
left:-30px;
position:absolute;
width:100px;
border-radius:50%;
height:550px;
background:#fff;
border-right:5px double dodgerblue;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

Answer 2

To build on #Akshay's answer, you could also then modify each li if you know how many you are going to have.
ul {
list-style: none;
overflow: auto;
box-sizing: border-box;
margin: 10px;
}
ul::before {
content: '';
width: 350px;
height: 550px;
border-radius: 50%;
border: 8px double #0195cb;
border-left: 0;
position: absolute;
top: 25px;
left: -200px;
}
li {
display: block;
width: 200px;
height: 70px;
padding: 20px;
padding-left: 80px;
font-size: 28px;
color: #fff;
background: dodgerblue;
margin: 10px 10px;
position: relative;
}
li:after {
position: absolute;
content: "";
width: 100px;
height: 100px;
background: #fff;
border: 5px solid dodgerblue;
border-radius: 50%;
top: 0px;
left: -50px;
}
li:nth-child(2) {
margin-left: 50px;
}
li:nth-child(3) {
margin-left: 90px;
}
li:nth-child(4) {
margin-left: 50px;
}
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

Answer 3

Image map if you want it to look exactly like the picture.
DEMO
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexCircle</title>
<style>
area { cursor:pointer; pointer-events:auto; }
</style>
</head>
<body>
<section>
<nav>
<img src="flexCircle.png" alt="" usemap="#fcMap" />
<map name="fcMap" id="fcMap">
<area alt="circleLink" title="Back" href="#" shape="circle" coords="75,64,45" />
<area alt="circleLink" title="Home" href="#" shape="circle" coords="101,171,45" />
<area alt="circleLink" title="Forward" href="#" shape="circle" coords="75,282,45" />
<area alt="bannerLink" title="About" href="#" shape="poly" coords="109,244,633,243,633,314,110,314,121,281" />
<area alt="bannerLink" title="Blog" href="#" shape="poly" coords="137,137,633,138,633,205,135,208,151,174" />
<area alt="bannerLink" title="Contact" href="#" shape="poly" coords="111,30,634,25,632,100,108,97,124,63" />
</map>
<!-- Coordinates generated with Easy Imagemap Generator by Dario D. Miller | http://imagemap-generator.dariodomi.de/ -->
</nav>
</section>
</body>
</html>