|
Tags: Blanking Manual revert |
Line 1: |
Line 1: |
| <html>
| |
| <!-- 方法2:HTML + CSS(需要允许 style/clip-path) -->
| |
| <style>
| |
| .tri { width:300px; height:260px; position:relative; clip-path:polygon(50% 0, 0% 100%, 100% 100%); background:#E6F4FF; font-family:sans-serif; }
| |
| .slice { position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center; color:#0b3b57; font-weight:600; }
| |
| .slice.top { top:0; height:86.6667px; clip-path:polygon(50% 0, 33.33% 100%, 66.67% 100%); }
| |
| .slice.mid { top:86.6667px; height:86.6667px; clip-path:polygon(33.33% 0, 16.67% 100%, 83.33% 100%, 66.67% 0); }
| |
| .slice.bot { top:173.3333px; height:86.6667px; clip-path:polygon(16.67% 0, 0% 100%, 100% 100%, 83.33% 0); }
| |
| </style>
| |
|
| |
|
| <div class="tri">
| |
| <div class="slice top">A</div>
| |
| <div class="slice mid">B</div>
| |
| <div class="slice bot">C</div>
| |
| </div>
| |
| </html>
| |