如何 - CSS箭頭
學習如何使用CSS建立箭頭。
右箭頭:
左箭頭:
上箭頭:
下箭頭:
如何建立箭頭
步驟 1) 新增 HTML
示例
<p>右箭頭: <i class="arrow right"></i></p>
<p>左箭頭: <i class="arrow left"></i></p>
<p>上箭頭: <i class="arrow up"></i></p>
<p>下箭頭: <i class="arrow down"></i></p>
步驟 2) 新增 CSS
示例
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
自己動手試一試 »
