紙の角めくれ（ペーパーカール）のCSSジェネレーター
カードの角がめくれたような視覚効果を付与。物理的に角を切り落とす clip-path を利用し、正確な形状とめくれ感を表現します。
プレビュー
<div class="paper-curl-card">
<div class="content">
<span class="title">Paper Curl</span>
<p>角がめくれたデザイン。</p>
</div>
</div>.paper-curl-card {
position: relative;
width: 300px;
height: 200px;
padding: 24px;
color: #fff;
background-color: {{bg_color}};
/* 角を斜めに切り抜く */
clip-path: {{card_clip}};
box-shadow: 0 8px 16px -6px rgba(0,0,0,0.26);
}
.paper-curl-card::after {
content: "";
position: absolute;
{{fold_pos}}
width: {{curl_size}}px;
height: {{curl_size}}px;
background-color: {{fold_color}};
/* めくれ部分を三角形に切り抜く */
clip-path: {{fold_clip}};
}
.paper-curl-card .title {
display: block;
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 8px;
}機能、使い方
- 正確な切り抜き:
clip-pathを使用してカードの角を物理的にカットしているため、背後の背景が完全に透けます。 - 独立した配色: カード本体、めくれの裏地、それぞれの色を個別に設定可能です。
- 全方位対応: 指定した角（右上、左上、右下、左下）に合わせて切り抜きと、めくれの形状が自動的に調整されます。
CSSプロパティの説明
clip-path: polygon() を使用して、カード本体の角を一箇所だけ斜めに切り落としています。
擬似要素 ::after を適用し、正方形を直角三角形として切り出すことで「めくれ」を表現しています。
