【初心者でもわかる】画像を切り抜いて、装飾に使えるCSS6選+おまけ

# どうも7noteです。画像装飾に使える様々なトリミング方法について

HTMLでは画像を配置すると、基本的には四角形で画像が表示されます。
ですがそのままでは味気ない場合もあると思います。

CSSでできる画像を切り抜いて、装飾をつける方法6つを紹介します。

## CSSで画像切り抜く方法6選

### ①普通の角丸

```index.html
<img src="hogehoge.gif" alt="" class="kadomaru">
```

```style.css
.kadomaru {
  border-radius: 10px;
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/635b4681-3352-be4f-8266-b78ca05d4ad8.png" width="320">


### ②円

```index.html
<img src="hogehoge.gif" alt="" class="kadomaru">
```

```style.css
.circle {
  border-radius: 50%;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/04fb8b85-0009-02fb-8589-784c7cecc051.png" width="320">


### ③葉っぱ型

```index.html
<img src="hogehoge.gif" alt="" class="kadomaru">
```

```style.css
.leaf {
  border-radius:60% 3%;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/1ebbe461-ef60-a755-e8ed-e5640765ce73.png" width="320">



### ④ストライプ

```index.html
<img src="hogehoge.gif" alt="" class="kadomaru">
```

```style.css
.stripe {
  width: 320px;
  height: 320px;
  position: relative;
}
.stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
  background-size: 15px 15px;
  display: block;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/6d25e49d-816b-6fb3-c45e-db73b2f1bceb.png" width="320">

### ⑤ボーダー

```index.html
<img src="hogehoge.gif" alt="" class="kadomaru">
```

```style.css
.border {
  width: 320px;
  height: 320px;
  position: relative;
}
.border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#fff 50%, transparent 50%);
  background-size: 15px 15px;
  display: block;
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/b3b100be-199d-32f0-f625-a6af0b648f65.png" width="320">


### ⑥十字形

```index.html
<img src="hogehoge.gif" alt="" class="kadomaru">
```

```style.css
.cross {
  width: 320px;
  height: 320px;
  position: relative;
}
.cross::before,
.cross::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.cross::before {
  background-image: linear-gradient(transparent 40%, #fff 40%, #fff 60%, transparent 60%);
}
.cross::after {
  background-image: linear-gradient(90deg,transparent 40%, #fff 40%, #fff 60%, transparent 60%);
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/1f9b272b-a04a-9334-4133-0a516935fc7b.png" width="320">


## おまけ（SVGで好きな形に切り抜く）

SVGを使えば好きな形に切り抜くことも可能です。

手順①：イラレ等でSVGを作る
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/dd0837d0-68aa-8cda-cd0f-3616375b2533.png" width="320">

手順②：コードをクリップボードにコピー
![svg2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/8f3a9635-973b-07f1-56f1-00ea4e47a285.png)

手順③：コピーしたソースをhtmlに貼り付け

手順④：貼り付けたソースに`<clipPath>`タグを追加する。

```index.html
<!-- 切り抜く画像 -->
<img src="hogehoge.gif" alt="" class="clip">

<!-- コピーしたSVGソース -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="320px" viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">
  <clipPath id="myClip"><!-- この行を追記 -->
    <polygon fill="#FFFFFF" points="299.784,223.569 198.13,220.013 137.571,301.738 109.54,203.96 13.101,171.62 97.431,114.745 
98.388,13.033 178.538,75.66 275.568,45.139 240.773,140.72 "/>
  </clipPath><!-- この行を追記 -->
</svg>
```

手順⑤：CSSを書く

```style.css
/* clipPathに書いたid名を使う */
.clip {
  clip-path: url(#myClip);
}
```

**結果**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/77997322-65a7-d00d-271f-ebf3850c1ee2.png" width="320">


参考：https://pisuke-code.com/css-examples-of-clip-path/#clip-path-svg-example

## まとめ

あらかじめデザインデータから切り抜かれたpng画像を使うのもいいのですが、写真や画像変更になるたびにデザインデータを差し替えて書き出して。。。よりも、正方形や長方形の画像をスパっと切り抜いた方が**加工や微調整もしやすい**ので、使い所はそこそこあるのかなと思います。

特にSVGによる切り抜きなんかは、手間はかかってしまうかもしれませんができることの幅は無限大に広がっているように思います。
私もまだあまり使ったことがないので今後どんどん実践で使っていきたいですね。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)