Map marker

by Bouteille Dimitri

HTML

<div class="marker">
  <div class="marker-infos">
    Petit voyage en islande
  </div>
  <div class="marker-pulse">
  </div>
</div>

<br><br>

<div class="marker">
  <div class="marker-infos">
    n°2
  </div>
  <div class="marker-pulse">
  </div>
</div>

<br><br>
<div class="marker">
  <div class="marker-pulse">
  </div>
</div>

SCSS

.marker {
  position: relative;
  margin: 200px;
  background: blue;
  
  &-infos {
    position: absolute;
    bottom: calc(100% + 18px);
    background: #FE6D56;
    color: #fff;
    border-radius: 12px 12px 12px 0;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    left: 0;
    margin-left: 8px;
    &:after {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 16px 0 0;
      border-color: #FE6D56 transparent transparent transparent;
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
    }
  }
  &-pulse {
    width: 16px;
    height: 16px;
    background: #FE6D56;
    border-radius: 50%;
    position: absolute;
    &:after {
      content: "";
      position: absolute;
      border-radius: inherit;
      background: rgba(#FE6D56, 0.3);
      width: inherit;
      height: inherit;
      left: 0;
      transform: scale(2.6);
      tansform-orign: center;
      top: 0;
      z-index: -1;
    }
  }
}