【初心者でもわかる】角がちょっとめくれている風CSSの書き方

どうも7noteです。角がめくれているように見えるCSSを作る方法

CSSを使って、紙の端が丸くめくれているようなCSSを再現します。

ソース

index.html

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

style.css

.box {
  width: 150px;    /* 幅を150pxに指定 */
  height: 200px;   /* 高さを200pxに指定 */
  border: 1px solid #000; /* 枠線を引く */
  position: relative;  /* 基準位置とする */
}
.box::before {
  content: "";
  width: 20px;   /* 幅を20pxに指定 */
  height: 20px;  /* 高さを20pxに指定 */
  background: linear-gradient(-45deg, #FFF 48%, #000 48%, #000 52%, #fff 52%);  /* グラデーションで1pxの線を引く */
  border-top: 1px solid #000;      /* 上に線を引く */
  border-left: 1px solid #000;     /* 左に線を引く */
  box-shadow: -1px -1px 2px #ccc;  /* うっすら影を作る */
  display: inline-block; /* インラインブロック要素にする */
  position: absolute; /* 相対位置に指定 */
  bottom: -1px; /* 下から-1ｐxの位置に配置 */
  right: -1px;  /* 右から-1ｐxの位置に配置 */
}

解説

まずは通常の四角形を作成し、borderを引きます。
その後、疑似要素で小さい四角形を作り、「右下なら反対の左と上」にborderを引きます。

斜め線をborderでは引けないので、グラデーションを使い「白→黒(1px)→白」のグラデーションを作成します。これを斜め方向に指定します。
position指定で-1pxずつずらすことで大きい四角の線を一部隠すことができます。

影は必要であればつけてください。若干の立体感が出ます。

まとめ

もっとリアルな感じで作れるかなと思っていたのですが、基本のCSSで作るならこんなかんじでしょうか。
くるとしている感をだすなら画像のほうがいいかもしれませんね。

もしくは画像そのものをめくったように処理するjsなんかもあるのでそのようなライブラリを使うのもいいかもしれません。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ