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;

完成です。