#css 基础-方向箭头#

1：三角形

html标记：

• <p>Right arrow: <i class="right"></i></p>
• <p>Left arrow: <i class="left"></i></p>
• <p>Up arrow: <i class="up"></i></p>
• <p>Down arrow: <i class="down"></i></p>

css 标记：

• i {
•   border: solid black;
•   border-width: 0 1px 1px 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);
• }