CSSで現在地アイコンを作る。

<div class="address">Tokyo, Japan</div>

.address{
  position: relative;

  /* アイコン配置空間の確保 */
  text-indent: 1.5em;
}

/* icon */
.address:before{
  /* 色 */
  color: crimson;

  content: '';
  position: absolute;
  top: 0; left: 0;

  width: 1em; height: 1em;
  border: .25em solid currentColor;
  border-radius: 100% 100% 0 100%;

  background: 
    radial-gradient(circle at 50% 50%, transparent 70%, currentColor 70%) no-repeat;

  box-sizing: border-box;
  transform: rotate(45deg);
}

作り方

• サイズを決めます (幅と高さを等しく)

width: 1em; height: 1em;

• borderを指定します

border: .25em solid currentColor;

• border-radius で 左上, 右上, 左下を丸めます(4つの角のうち3つ丸める)

/* 左上 右上 右下 左下 */
border-radius: 100% 100% 0 100%;

• 回転させて尖っている所を下向きにする

/* 45deg | 135deg | 225deg | 315deg */
transform: rotate(45deg);

• box-sizing: border-box を指定

box-sizing: border-box;

• 仕上げに radial-gradient で 内枠の形を整えます

background: 
    radial-gradient(circle at 50% 50%, transparent 70%, currentColor 70%) no-repeat;

完成です。