html中的圆圈链接,html – 是否可以用CSS创建这个形状(两个部分圆连接在一起)？...

我试图用CSS完成两个div的这个边框：

我试着只使用border-radius，但两个部分圆没有压在一起：http://jsfiddle.net/uwz6L79w/

.left {

position: absolute;

left: 0;

top: 0;

width: 100px;

height: 100px;

border-width: 4px;

border-color: black white black black;

border-style: solid;

border-radius: 60px

}

.right {

position: absolute;

left: 104px;

top: 0;

width: 100px;

height: 100px;

border-width: 4px;

border-color: black black black white;

border-style: solid;

border-radius: 60px;

}

我可以只是把他们一起进一步，但我必须有一个重叠的另一个，像这样：http://jsfiddle.net/uwz6L79w/1/。

.left {

position: absolute;

left: 0;

top: 0;

width: 100px;

height: 100px;

border-width: 4px;

border-color: black white black black;

border-style: solid;

border-radius: 60px

}

.right {

position: absolute;

left: 70px;

top: 0;

width: 100px;

height: 100px;

border-width: 4px;

border-color: black black black white;

border-style: solid;

border-radius: 60px;

background: #f2f2f2;

}

有没有人知道我怎么可以完成这一切，而没有div重叠？