Блог

Мне нужен указатель на карте мира, как показано на рисунке ниже:

Я смог создать круг, используя HTML / CSS, и вот тот, который я создал:

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

}

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

Теперь мне нужно, чтобы 2 линии пересекались вместе с изображением, как показано на рисунке выше. Возможно ли это с помощью html / css?

Спасибо

Вы можете использовать псевдоэлементы :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;
}