Skip to content

Instantly share code, notes, and snippets.

@stephenfjohnson
Created April 19, 2018 00:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stephenfjohnson/7a557ec3010ed95bf6f3d6ebe5c3f077 to your computer and use it in GitHub Desktop.
Save stephenfjohnson/7a557ec3010ed95bf6f3d6ebe5c3f077 to your computer and use it in GitHub Desktop.
Here is the CSS for a simple location dot with an image πŸ‘‰ https://imgur.com/a/9L4WLOu
.marker {
display: block;
border: none;
border-radius: 50%;
width: 70px;
height: 70px;
cursor: pointer;
padding: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); */
border: 4px solid white;
top: -40px;
z-index: 1;
}
.marker-dot {
width: 15px;
height: 15px;
border-radius: 50%;
background: rgb(136, 127, 255);
/* border: 7px solid rgb(231, 227, 255); */
box-shadow: 0 0 0 3px rgb(255, 255, 255), 0 0 0 20px rgba(20, 94, 255, 0.08);
/* outline: 15px solid rgba(20, 94, 255, 0.1); */
}
.marker-dot::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
border-width: 14px 22px 0 22px;
border-style: solid;
border-color: white transparent transparent transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment