<p><span class="ql-size-huge">以下是笔画箭头，(空心的)</span></p><p><span class="ql-size-large">HTML 模块</span></p><pre class="ql-syntax" spellcheck="false">&lt;p&gt;Right arrow: &lt;i class="right"&gt;&lt;/i&gt;&lt;/p&gt; &lt;p&gt;Left arrow: &lt;i class="left"&gt;&lt;/i&gt;&lt;/p&gt; &lt;p&gt;Up arrow: &lt;i class="up"&gt;&lt;/i&gt;&lt;/p&gt; &lt;p&gt;Down arrow: &lt;i class="down"&gt;&lt;/i&gt;&lt;/p&gt; </pre><p><br></p><p><br></p><p><span class="ql-size-large">CSS模块</span></p><pre class="ql-syntax" spellcheck="false">i { &nbsp; border: solid black; &nbsp; border-width: 0 1px 1px 0; &nbsp; display: inline-block; &nbsp; padding: 3px; } .right { &nbsp; transform: rotate(-45deg); &nbsp; -webkit-transform: rotate(-45deg); } .left { &nbsp; transform: rotate(135deg); &nbsp; -webkit-transform: rotate(135deg); } .up { &nbsp; transform: rotate(-135deg); &nbsp; -webkit-transform: rotate(-135deg); } .down { &nbsp; transform: rotate(45deg); &nbsp; -webkit-transform: rotate(45deg); } </pre><p><br></p><p><br></p><p><span class="ql-size-huge">以下是三角形箭头(实心)</span></p><p><span class="ql-size-large">css模块</span></p><pre class="ql-syntax" spellcheck="false">#triangle-up { display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-bottom:50px solid red; } #triangle-down { display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-top:50px solid red; } #triangle-left { display:inline-block; width:0; height:0; border-top: 30px solid transparent; border-right: 50px solid red; border-bottom: 30px solid transparent; } #triangle-right{ display:inline-block; width:0; height:0; border-top: 30px solid transparent; border-left: 50px solid red; border-bottom: 30px solid transparent; } </pre>