使用HTML/CSS创建线和圆的交集

Question

我需要一个世界地图上的指针,如下图所示:

我能够使用HTML/CSS创建一个圆圈,这是我创建的圆圈:

.circle {
border-radius: 50%/50%; 
width: 50px;
height: 50px;
background: black;

}

http://jsfiddle.net/sreeram62/8QRAJ/

现在我需要与图像相交的2条线,如上图所示.是否可以使用html/css？

谢谢

Answer 1

您可以使用pseudoelements :after和:before在想这个例子

如图所示,这是完全由所有主要浏览器(IE9 +)支持这里

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
    position: relative;
    top: 200px;
    left: 50%;
}
.circle:after {
    content: '';
    display: block;
    height: 1px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: -125px;
    background-color: #f00;
}

.circle:before {
    content: '';
    display: block;
    height: 300px;
    width: 1px;
    position: absolute;
    left: 50%;
    top: -125px;
    background-color: #f00;
}