🎉

CSS だけで単色じゃない背景の上にドッグイヤー(折り返し)を作る方法

4 min read

概要

CSS だけで単色じゃない背景の上にドッグイヤー(折り返し)を作れるよ、という話。IE11 も対応します。

そもそもドッグイヤーとは?

ちょいちょい見かける紙の端を折り返したような表現のことをドッグイヤーと呼ぶらしいです。
確かに名前の通り犬の耳に見えますね。

さて、早速ですがよく見るドッグイヤーの実装方法は下記のような感じです。

html
<div class="title">
  <p class="text">ドッグイヤー 01 - デモ</p>
</div>
css
.title {
  position: relative;
  width: 300px;
  padding: 30px;
  box-sizing: border-box;
  background: #bad3ff;
}
/* 擬似要素を使ってドッグイヤー部分を表現 */
.title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border: 7px solid #4689ff;
  border-right-color: #fff; /* 背景色 */
  border-bottom-color: #fff; /* 背景色 */
  box-sizing: border-box;
}

ドッグイヤーを実装したことある方にはよく見慣れたコードだと思います。border を使って三角形を作成し、それを右下に重ねています。

基本的には問題ないのですが、上記の場合、背景が単色の時しか対応できないんですよね。

背景が単色じゃない時のドッグイヤーの実装 - IE 対応 -

では背景が単色じゃない時の実装はどうするのかというと、今回紹介するのは

  • linear-gradient
  • clip-path

のプロパティを使う 2 通りになります。このうち IE11 に対応できるのは linear-gradient の方なのでまずは linear-gradient の実装方法をみていきましょう。

CSS の変更箇所を以下に示します(html に変更はなし)。
サンプルコードには示しませんが、背景をわかりやすくするため、グラデーションさせています。

css
.title {
  position: relative;
  width: 300px;
  padding: 30px;
  box-sizing: border-box;
  background: linear-gradient(
    -45deg,
    transparent 10px,
    #bad3ff 10px,
    #bad3ff 100%
  ); /* 切り取り部分を transparent で指定 */
}
.title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border: 7px solid #4689ff;
  border-right-color: transparent;
  border-bottom-color: transparent;
  box-sizing: border-box;
}

background に linear-gradient を指定し、右下に端の折り返し(切り取り部分)を作ります。
見ての通り transparent で 指定しいるので折り返し(切り取り部分)が透明になります。

この時 border 幅の計算が若干面倒なので、簡単に説明します。
linear-gradient で指定した transparent の幅に √2 ÷ 2 を掛けた値が目安になります。

[linear-gradient で指定した transparent の幅] × √2 ÷ 2

が目安となるので、サンプルコードでは

10(px) × √2 ÷ 2 = 7.07106781187(px)

となります。今回の場合は小数点を切り捨て、7px としているのですが、1px 単位の微調整は、実際に目でも確認することをお勧めします。

影をつける

さらに面倒なことに影をつけたいという要望があるとします。
シンプルに目的の要素に box-shadow をつけてみると、表示がおかしくなることに気づきますね。

このような場合は drop-shadow を使いましょう。

css
.title {
  position: relative;
  width: 300px;
  padding: 30px;
  box-sizing: border-box;
  background: linear-gradient(
    -45deg,
    transparent 10px,
    #bad3ff 10px,
    #bad3ff 100%
  );
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.9)); /* drow-shadow を使う */
}

ただご存知の通り 上記のコードは IE11 には対応できません。どうしても IE11 に対応したい場合は以下のようにします。
多少影の見え方は変わってしまいますが、その辺りは細かく調整するしかないです、、。

css
.title::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: calc(100% - 14px); /* はみ出さないようにする */
  height: calc(100% - 14px); /* はみ出さないようにする */
  box-shadow: 2px 2px 12px -2px rgba(0, 0, 0, 0.9);
  z-index: -1; /* .title の親要素に position:relative と z-index:1 を忘れない */
}

背景が単色じゃない時のドッグイヤーの実装 - IE11 非対応 -

IE11 非対応でいいのであれば、もう少し簡単にドッグイヤーを実装できます。
そうです。clip-path を使いましょう。
注意点として、もし影をつけたい場合は、親要素につけましょう。

<!-- 影は親要素煮付ける -->
<div class="shadow">
  <div class="title">
    <p class="text">ドッグイヤー 05 - デモ</p>
  </div>
</div>
css
.shadow {
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.9)); /* drow-shadow は親につける */
}
.title {
  position: relative;
  width: 300px;
  padding: 30px;
  box-sizing: border-box;
  background-color: #bad3ff;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%
  );
}

まとめ

ドッグイヤー実装方法の解説でした。IE11 がなければ、わりとすんなりできるのですが IE11 対応を考えると意外と大変ですね。

参考

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN
drop-shadow() - CSS: カスケーディングスタイルシート | MDN
clip-path - CSS: カスケーディングスタイルシート | MDN

Discussion

ログインするとコメントできます