操作方法 - CSS 箭头

了解如何使用 CSS 创建箭头。

右箭头：

左箭头：

向上箭头：

向下箭头：

如何创建箭头

步骤1）添加HTML：

示例

Right arrow: 
Left arrow: 
Up arrow: 
Down arrow:

步骤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);
}

亲自试一试 »