Test 三角形: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
<html> | |||
<!-- 方法2：HTML + CSS（需要允许 style/clip-path） --> | <!-- 方法2：HTML + CSS（需要允许 style/clip-path） --> | ||
<style> | <style> | ||
| Line 13: | Line 14: | ||
<div class="slice bot">C</div> | <div class="slice bot">C</div> | ||
</div> | </div> | ||
</html> | |||
Revision as of 15:37, 23 September 2025
<html> <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>
A
B
C
</html>