右上角折起一角，悬停时折角变大，像被翻起的书页
← 返回 卡片 类特效列表border 三角形折角
上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .fc3{position:relative;width:250px;margin:40px auto;padding:22px;background:#16202e;border-radius:12px;color:#e6edf3;overflow:hidden}
.fx .fc3 h4{margin:0 0 6px}
.fx .fc3 p{margin:0;font-size:13px;color:#9aa7b8}
.fx .fc3::after{content:"";position:absolute;top:0;right:0;border-width:0 26px 26px 0;border-style:solid;border-color:#2d3748 #f778ba;transition:border-width .25s}
.fx .fc3:hover::after{border-width:0 44px 44px 0}<div class="fx">
<div class="fc3"><h4>折角卡片</h4><p>border 三角形折角</p></div>
</div>