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

これ
![スクリーンショット 2015-10-21 15.33.23.png](https://qiita-image-store.s3.amazonaws.com/0/34634/d60f3ce9-52ec-4a51-8682-d4157d4930ff.png)

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

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

```css
*{
    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%;
}
```

背景色が変わると
![スクリーンショット 2015-10-21 15.33.50.png](https://qiita-image-store.s3.amazonaws.com/0/34634/7332e13a-146e-131a-d1e3-17b327bef39e.png)

`(´・ω・｀)`

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

ので、作りました。
## 透過OKバージョン

```css
.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%;
}
```

これで、
![スクリーンショット 2015-10-21 15.34.23.png](https://qiita-image-store.s3.amazonaws.com/0/34634/b8eaffa0-733c-1e1c-4951-cd5f998dd218.png)

`ヽ(*´ｖ｀*)ﾉ`


## おまけ

### ハート

![スクリーンショット 2015-10-21 15.50.35.png](https://qiita-image-store.s3.amazonaws.com/0/34634/9923c5ed-facf-c719-89cf-fa16556c3457.png)

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

```css
.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);
}
```

### ハンバーガーメニュー

![スクリーンショット 2015-10-21 15.51.13.png](https://qiita-image-store.s3.amazonaws.com/0/34634/7cd579e2-f12a-76d3-d18d-3300c98228e7.png)

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

```css
.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;
}
```

### リストアイコン

![スクリーンショット 2015-10-21 15.51.20.png](https://qiita-image-store.s3.amazonaws.com/0/34634/40211a8a-04d5-5777-8bf9-f31817bbf954.png)

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

```css
.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;
}
```

### 電卓

![スクリーンショット 2015-10-21 15.51.25.png](https://qiita-image-store.s3.amazonaws.com/0/34634/924c2d73-3c3b-2845-7423-c63702dfbe38.png)

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

```css
.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;
}
```