Test 三角形: Difference between revisions

From 清冽之泉
Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
Tag: Reverted
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<graphviz>
<!-- 方法2：HTML + CSS（需要允许 style/clip-path） -->
digraph {
<style>
    rankdir=TB
.tri { width:300px; height:260px; position:relative; clip-path:polygon(50% 0, 0% 100%, 100% 100%); background:#E6F4FF; font-family:sans-serif; }
    splines=false
.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); }
        shape=invtriangle
</style>
        style=filled
        fillcolor=green
        label="无罪"
        width=3
        height=2
    ]
   
    // 中层三角形
    中层 [
        shape=invtriangle
        style=filled
        fillcolor=yellow
        label="轻罪"
        width=2
        height=1.3
    ]
   
    // 顶层三角形
    顶层 [
        shape=invtriangle
        style=filled
        fillcolor=red
        label="重罪"
        width=1
        height=0.7
    ]
   
    // 排列层级
    {rank=same; 底层 中层 顶层}
   
    // 不可见连接确保正确重叠
    底层 -> 中层 -> 顶层 [style=invis]
}
</graphviz>


<div class="tri">
 
   <div class="slice top">A</div>
 
  <div class="slice mid">B</div>
<graphviz>
  <div class="slice bot">C</div>
digraph {
</div>
    rankdir=TB
</html>
    nodesep=0.05
   
    node [style=filled]
    重罪 [shape=triangle, fillcolor=red, label="重罪", width=0.8]
    轻罪 [shape=trapezium, fillcolor=yellow, label="轻罪", width=1.6]
    无罪 [shape=trapezium, fillcolor=green, label="无罪", width=2.4]
   
    重罪 -> 轻罪 -> 无罪 [style=invis]
}
</graphviz>
 
 
<graphviz>
digraph pyramid {
    graph [splines=false, nodesep=0, ranksep=0]
    node [style=filled, fixedsize=true, fontcolor=black]
 
    重罪 [shape=triangle,   fillcolor=red,  width=1.2, height=0.6, label="重罪", pos="1,3!"]
    轻罪 [shape=trapezium, fillcolor=yellow, width=2.0, height=0.6, label="轻罪", pos="1,2!"]
    无罪 [shape=trapezium, fillcolor=green,  width=3.0, height=0.6, label="无罪", pos="1,1!"]
 
}
</graphviz>
 
 
<graphviz>
digraph pyramid {
    node [shape=plaintext]
 
    pyramid [
      label=<
        <TABLE BORDER="1" CELLBORDER="0" CELLSPACING="0">
          <TR><TD BGCOLOR="red"  FIXEDSIZE="TRUE" WIDTH="100" HEIGHT="30">重罪</TD></TR>
          <TR><TD BGCOLOR="yellow" FIXEDSIZE="TRUE" WIDTH="160" HEIGHT="30">轻罪</TD></TR>
          <TR><TD BGCOLOR="green"  FIXEDSIZE="TRUE" WIDTH="220" HEIGHT="30">无罪</TD></TR>
        </TABLE>
      >
    ];
}
</graphviz>

Latest revision as of 15:55, 23 September 2025




Retrieved from "https://qingliezhiquan.com/index.php?title=Test_三角形&oldid=7791"