Created
April 19, 2018 00:10
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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