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

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

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

基本のコード

HTML

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

<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 の変数は今回のサンプル用です。

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

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

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

サンプル1：レイヤー風

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

HTML

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

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）と組み合わせてマスキングテープのような表現も出来ます。

HTML

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

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っぽく見せることも出来ます。

HTML

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

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：背景画像っぽく

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

HTML

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

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にまとめています。

See the Pen Pure CSS Box Decoration by noqua (@noqua) on CodePen.

---

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

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

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