Help us understand the problem. What is going on with this article?

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

More than 3 years have 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;

完成です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away