Test 三角形: Difference between revisions

From 清冽之泉
Jump to navigation Jump to search
← Older editNewer edit →
VisualWikitext
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
<!-- 方法1：SVG 版本（推荐） -->
<!-- 方法2：HTML + CSS（需要允许 style/clip-path） -->
<div style="width:300px;">
<style>
<svg viewBox="0 0 300 260" xmlns="http://www.w3.org/2000/svg" aria-label="三层三角形">
.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; }
  <polygon points="150,0 0,260 300,260" fill="#E6F4FF" stroke="#BEE6FF" stroke-width="1"/>
.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); }
  <line x1="100" y1="86.6667" x2="200" y2="86.6667" stroke="#FFFFFF" stroke-width="2" />
.slice.bot { top:173.3333px; height:86.6667px; clip-path:polygon(16.67% 0, 0% 100%, 100% 100%, 83.33% 0); }
  <line x1="50"  y1="173.3333" x2="250" y2="173.3333" stroke="#FFFFFF" stroke-width="2" />
</style>
  <!-- 层标签 A B C（居中） -->
 
   <text x="150" y="43.333"  text-anchor="middle" dominant-baseline="middle" font-size="20" font-family="sans-serif" fill="#0b3b57">A</text>
<div class="tri">
   <text x="150" y="130"    text-anchor="middle" dominant-baseline="middle" font-size="20" font-family="sans-serif" fill="#0b3b57">B</text>
   <div class="slice top">A</div>
   <text x="150" y="216.666" text-anchor="middle" dominant-baseline="middle" font-size="20" font-family="sans-serif" fill="#0b3b57">C</text>
   <div class="slice mid">B</div>
</svg>
   <div class="slice bot">C</div>
</div>
</div>

Revision as of 15:36, 23 September 2025

<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
Retrieved from "https://qingliezhiquan.com/index.php?title=Test_三角形&oldid=7784"