Connecting circles in CSS3

I want to connect my circles with line going between them in CSS3 but i don't know how to.

.circle
{
    display: inline-block;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: orange;
    border: 2px black solid;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>