CSS
CSS3

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

More than 1 year has passed since last update.

sample2.png

<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;

完成です。