아무래도 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 제작의 조금 테크 모임