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

【问题标题】：Create intersection of lines and circle using HTML/CSS使用 HTML/CSS 创建线和圆的交点
【发布时间】：2014-07-01 19:24:59
【问题描述】：

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

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

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

}

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

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

谢谢

【问题讨论】：

标签： css html css-shapes

【解决方案1】：

您可以使用伪元素:after 和:before，如this example

所有主流浏览器（IE9+）都完全支持这一点，如图here

.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;
}

【讨论】：