使用HTML/CSS创建直线和圆的交点
我需要一个世界地图上的指针,如下图所示: 我能够使用HTML/CSS创建一个圆圈,下面是我创建的圆圈:使用HTML/CSS创建直线和圆的交点,css,html,css-shapes,Css,Html,Css Shapes,我需要一个世界地图上的指针,如下图所示: 我能够使用HTML/CSS创建一个圆圈,下面是我创建的圆圈: .circle { border-radius: 50%/50%; width: 50px; height: 50px; background: black; } 现在,我需要2条线相交的图像,如上图所示。可以使用html/css吗 谢谢您可以使用伪元素:after和:before如 如图所示,所有主要浏览器(IE9+)都完全支持这一点 您可以使用伪元素:after和:before如
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
现在,我需要2条线相交的图像,如上图所示。可以使用html/css吗
谢谢您可以使用伪元素
:after
和:before
如
如图所示,所有主要浏览器(IE9+)都完全支持这一点
您可以使用伪元素
: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;
}