CSSだけでイマドキ？なボックス装飾


CSSの表現幅が広がり画像を使わずともさまざまな装飾を施せるようになりましたね。
今回はCSSのみで装飾するボックスのサンプルをいくつかご紹介します。

※モダンブラウザのみ対応


<img src="https://qiita-image-store.s3.amazonaws.com/0/62022/e6ec0f6e-b243-f84d-f1be-0a8a3c65eace.png" alt="今回実現するボックス装飾" width="575">


## 基本のコード

### HTML

基本的に ```div``` 一つで作ります。
※div内のテキストはダミーテキストです。

```html
<div class="box">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
```

### CSS

```:root``` の変数は今回のサンプル用です。

```css
:root {
	--margin: 30px;
	--radius: 15px;
}

.box {
	margin: 5%;
	position: relative;
	box-sizing: border-box;
	width: 400px;
}

.box:before,
.box:after {
	content: '';
	position: absolute;
}
```

## サンプル1：レイヤー風

レイヤーが重なっているような表現。

<img src="https://qiita-image-store.s3.amazonaws.com/0/62022/4ec9ff4c-4688-c6d3-9038-2da0d7f3937e.png" alt="イメージ：レイヤー風" width="475">

### HTML

```html
<div class="box layered">
...
</div>
```

### CSS

```css
.layered {
	padding: var(--margin);
	border-radius: var(--radius);
	border: 5px solid rgba(0, 0, 0, 0.35);
	text-align: justify;
}

.layered:before,
.layered:after {
	width: 100%;
	height: 100%;
	border-radius: var(--radius);
}

.layered:before {
	z-index: -1;
	left: 12px;
	top: 12px;
	background: linear-gradient(135deg, aquamarine, aqua);
}

.layered:after {
	z-index: -2;
	left: 30px;
	top: 30px;
	background: linear-gradient(-45deg, #ddd 25%, #fff 25.1%, #fff 50%, #ddd 50.1%, #ddd 75%, #fff 75.1%, #fff 0);
	background-size: 15px 15px;
}
```

## サンプル2：マステ風

CSSグラデーションでさまざまな模様を描けるので、疑似要素（:before, :after）と組み合わせてマスキングテープのような表現も出来ます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/62022/2a111fb1-ec38-8bd6-788e-6897777aa3c7.png" alt="イメージ：マステ風" width="464">


### HTML

```html
<div class="box brackets">
	<div><!-- これだけ.box直下にdivが必要です -->
...
	</div>
</div>
```

### CSS

```css
.brackets {
	text-align: justify;
}

.brackets:before,
.brackets:after {
	z-index: 2;
}

.brackets:before {
	left: 51%;
	top: -10px;
	width: 50%;
	height: 20px;
	background: linear-gradient(to right, aqua 25%, transparent 25.1%, transparent 50%, aqua 50.1%, aqua 75%, transparent 75.1%, transparent 0);
	background-size: 25px 25px;
	transform: skewX(135deg);
}

.brackets:after {
	right: -10px;
	top: 5px;
	width: 20px;
	height: 45%;
	background: linear-gradient(to bottom, aqua 25%, transparent 25.1%, transparent 50%, aqua 50.1%, aqua 75%, transparent 75.1%, transparent 0);
	background-size: 25px 25px;
	transform: skewY(135deg);
}

.brackets > div {
	z-index: 1;
	box-sizing: border-box;
	position: relative;
	padding: var(--margin);
	width: 100%;
	height: 100%;
	box-shadow: 0 15px 20px rgba(0, 0, 0, 0.12);
}

.brackets > div:before,
.brackets > div:after {
	content: '';
	position: absolute;
}

.brackets > div:before {
	right: 49%;
	bottom: -10px;
	width: 50%;
	height: 20px;
	background: linear-gradient(to right, aqua 25%, transparent 25.1%, transparent 50%, aqua 50.1%, aqua 75%, transparent 75.1%, transparent 0);
	background-size: 25px 25px;
	transform: skewX(135deg);
}

.brackets > div:after {
	left: -2%;
	bottom: 0;
	width: 20px;
	height: 45%;
	background: linear-gradient(to bottom, aqua 25%, transparent 25.1%, transparent 50%, aqua 50.1%, aqua 75%, transparent 75.1%, transparent 0);
	background-size: 25px 25px;
	transform: skewY(135deg);
}
```

CSSグラデーションを使うと斜線の他にもいろんな模様が表現出来ます。
参考 ▷ https://freebiesupply.com/blog/css-background-patterns/

## サンプル3：立体的なボックス

平面なボックスに側面を加えて3Dっぽく見せることも出来ます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/62022/bd03ec74-bb58-6f8d-4fd5-b053624a09ba.png" alt="イメージ：立体的なボックス" width="497">

### HTML

```html
<div class="box box3d">
...
</div>
```

### CSS

```css
.box3d {
	padding: var(--margin);
	background: linear-gradient(135deg, aquamarine, aqua);
	text-align: justify;
}

.box3d:before {
	right: -50px;
	top: 25px;
	width: 50px;
	height: 100%;
	background: linear-gradient(to bottom, #00e6e6, aqua);
	transform: skewY(45deg);
}

.box3d:after {
	bottom: -50px;
	left: 25px;
	width: 100%;
	height: 50px;
	background: linear-gradient(to right, #00e6e6, aqua);
	transform: skewX(45deg);
}
```

## サンプル4：背景画像っぽく

疑似要素やグラデーションを組み合わせると画像のような表現も出来ます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/62022/2957ec1d-a426-6a8c-43f0-1105f83f6685.png" alt="イメージ：背景画像" width="563">


### HTML

```html
<div class="box circle">
...
</div>
```

### CSS

```css
.circle {
	text-align: justify;
}

.circle:before {
	z-index: -1;
	top: -10%;
	left: 45%;
	width: 75%;
	height: 0;
	padding-top: 75%;
	border-radius: 100%;
	background: linear-gradient(135deg, aquamarine, aqua);
}

.circle:after {
	z-index: -2;
	top: 50%;
	left: 45%;
	width: 100%;
	height: 0;
	border-bottom: 2px solid #ddd;
	box-shadow: 50px 10px 0 #ddd;
	transform: rotate(135deg);
}
```

## CodePen

今回のコードは[CodePen](https://codepen.io/noqua/full/vjXgbR)にまとめています。

<p data-height="265" data-theme-id="0" data-slug-hash="vjXgbR" data-default-tab="css,result" data-user="noqua" data-embed-version="2" data-pen-title="Pure CSS Box Decoration" class="codepen">See the Pen <a href="https://codepen.io/noqua/pen/vjXgbR/">Pure CSS Box Decoration</a> by noqua (<a href="https://codepen.io/noqua">@noqua</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

---

グラデーションを用いればだいたいイイ感じになりますね。
装飾のためだけにタグを多用するのは好きじゃないので、基本の ```div``` と ```:before``` ```:after``` だけで遊んでいきたいです。

同じようにテキストにもこのような装飾を施せるので、次はテキストの装飾サンプルも作ってみようと思います。


参考になりましたら幸いです。