I need a pointer on a world map as shown in below image:
I was able to create a circle using HTML/CSS and here is the one I created:
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
http://jsfiddle.net/sreeram62/8QRAJ/
Now I need 2 lines intersected along with image as shown in above image. Is it possible using html/css?
Thanks
You can use the pseudoelements :after
and :before
like in this example
This is fully supported by all major browsers (IE9+) as shown 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;
}