歯車アイコン【背景が何でも大丈夫】

これ

今までこうやって書いてた

<div class="outer">
    <div class="iconGear"><div></div></div>
</div>

*{
    box-sizing: border-box;
}
.outer{
    position: relative;
    width: 30px;
    height: 30px;
}

.iconGear,
.iconGear:before,
.iconGear:after,
.iconGear div:before{
    position: absolute;
    width: 4px;
    height: 20px;
    content: '';
    background-color: #aaa;
    border-radius: 1px;
}
.iconGear{
    top: 5px;
    left: 13px;
}
.iconGear:before{
    top: 0;
    left: 0;
    transform: rotate(45deg);
}
.iconGear:after {
    top: 0;
    left: 0;
    transform: rotate(-45deg);
}
.iconGear div:before{
    top: -2px;
    left: 6px;
    transform: rotate(90deg);
 }
.iconGear div{
    position: absolute;
    top: 2px;
    left: -6px;
    width: 16px;
    height: 16px;
    background-color: #aaa;
    border-radius: 50%;
    z-index: 5;
 }
.iconGear div:after {
    position: absolute;
    top: 4px;
    left: 4px;
    content: '';
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}

背景色が変わると

(´・ω・｀)

背景が単色ならば良いけど、画像やグラデーションだった場合に対応できない。

ので、作りました。

透過OKバージョン

.iconGear,
.iconGear:before,
.iconGear:after,
.iconGear div:before{
    position: absolute;
    width: 4px;
    height: 6px;
    content: '';
    box-shadow: inset 0 0 0 2px #ccc,0 14px 0 0 #ccc;
    border-radius: 1px;
}
.iconGear{
    top: 5px;
    left: 13px;
}
.iconGear:before{
    left: 5px;
    top: 2px;
    transform: rotate(45deg);
}
.iconGear:after {
    left: -5px;
    top: 2px;
    transform: rotate(-45deg);
}
.iconGear div:before{
    top: 1px;
    left: 9px;
    transform: rotate(90deg);
}
.iconGear div{
    position: absolute;
    top: 2px;
    left: -6px;
    width: 16px;
    height: 16px;
    border: 4px solid #ccc;
    border-radius: 50%;
}

これで、

ヽ(*´ｖ｀*)ﾉ

おまけ

ハート

<div class="iconHeart"></div>

.iconHeart {
    height: 32px;
    width: 32px;
    position: relative;
    overflow: hidden;
}
.iconHeart:before {
    position: absolute;
    top: 2px;
    left: 4px;
    content: '';
    height: 26px;
    width: 16px;
    background: #fff;
    border-radius: 100px 100px 0 0;
    transform: rotate(-45deg);
}
.iconHeart:after {
    position: absolute;
    top: 2px;
    right: 4px;
    content: '';
    height: 26px;
    width: 16px;
    background: #fff;
    border-radius: 100px 100px 0 0;
    transform: rotate(45deg);
}

ハンバーガーメニュー

<div class="menu"><span></span><span></span><span></span>menu</div>

.menu{
    font-size: 10px;
    line-height: 1;
}
.menu span{
    display: block;
    width: 26px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
    margin: 0 1px 5px;
}

リストアイコン

<div class="iconList"></div>

.iconList{
    width: 32px;
    height: 30px;
    margin: 13px auto;
    border: 1px solid #fff;
    border-radius: 1px;
    position: relative;
}
.iconList:before {
    position: absolute;
    top: 12px;
    left: 3px;
    content: '';
    width: 4px;
    height: 4px;
    box-shadow: inset 0 0 0 2px #fff,0 -7px 0 0 #fff,0 7px 0 0 #fff;
}
.iconList:after {
    position: absolute;
    top: 13px;
    left: 9px;
    content: '';
    width: 18px;
    height: 2px;
    box-shadow: inset 0 0 0 2px #fff,0 -7px 0 0 #fff,0 7px 0 0 #fff;
}

電卓

<div class="iconCalc"><div></div></div>

.iconCalc{
    width: 32px;
    height: 30px;
    margin: 13px auto;
    border: 1px solid #fff;
    border-radius: 2px;
    position: relative;
}
.iconCalc:before {
    position: absolute;
    top: 9px;
    left: 0;
    content: '';
    width: 30px;
    height: 1px;
    box-shadow: inset 0 0 0 32px #fff,0 10px 0 0 #fff;
}
.iconCalc:after {
    position: absolute;
    top: 0;
    left: 9px;
    content: '';
    width: 1px;
    height: 19px;
    box-shadow: inset 0 0 0 32px #fff;
}
.iconCalc div {
    position: absolute;
    top: 0;
    left: 20px;
    content: '';
    width: 1px;
    height: 28px;
    box-shadow: inset 0 0 0 32px #fff;
}