右下が縦にめくれた紙
【html(直接css)】
<div style="position:relative; background-color:#def; margin:5px; padding:20px">右下が縦にめくれた紙に書く文章<div style="position:absolute; bottom:0; right:0; display:block; width:80px; height:80px; background-image: linear-gradient(-45deg, rgba(0,0,0,.1) 50%,transparent 50%);"></div><div style="position:absolute; bottom:0; right:40px; display:block; width:40px; height:20px; background-image: linear-gradient(45deg, #def 50%,transparent 50%);"></div><div style="position:absolute; bottom:0; right:0; display:block; width:46px; height:80px; background-image: linear-gradient(-60deg, #fff 50%,transparent 50%);"></div><div style="position:absolute; bottom:0; right:42px; display:block; width:12px; height:12px; background-color:#fff;"></div><div style="position:absolute; bottom:0; right:41px; display:block; width:24px; height:24px; background-color:#def; border-radius:50%;"></div></div>
紙に文字を書かなかったり1列だけだと、下のように、めくれ部分がおかしくなります。また、右下まで書くと表示されないので、その場合はpaddingの値を調整等してください。
54321

TOPSUBCSS実験室

*前134次#

×
人気急上昇中のBL小説
BL小説 BLove
- ナノ -