- CSS 教程
- CSS - 主页
- CSS - 简介
- CSS - 语法
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 边距
- CSS - 列表
- CSS - 填充
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS-Clearfix
- CSS-浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 焦点
- CSS - 缩放
- CSS - 翻译
- CSS - 高度
- CSS - 宽度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 导航栏
- CSS - 叠加
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS-根
- CSS - 盒子模型
- CSS - 计数器
- CSS - 剪辑
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS 高级
- CSS-弹性盒
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 媒体类型
- CSS - 分页媒体
- CSS-听觉媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - 重要
- CSS3 教程
- CSS3 - 教程
- CSS3 - 圆角
- CSS3 - 边框图像
- CSS3 - 多背景
- CSS3 - 颜色
- CSS3 - 渐变
- CSS3 - 阴影
- CSS3 - 文本
- CSS3 - 网页字体
- CSS3 - 二维变换
- CSS3 - 3D 变换
- CSS3 - 动画
- CSS3 - 多列
- CSS3 - 用户界面
- CSS3 - 盒子尺寸
- CSS 响应式
- CSS - 响应式网页设计
- CSS 资源
- CSS - 有用的资源
- CSS - 讨论
CSS - 箭头
什么是 CSS 箭头？
用户界面中使用箭头来引导用户并帮助他们理解信息流。它们提供视觉线索来导航不同的操作。
箭头是改善用户体验的有效方法。它们用于工具提示、下拉菜单、导航元素等。这使得引导用户完成流程变得更加容易。
可以使用 CSS 属性创建箭头，如下所示：
变换：此属性可用于通过使用rotate()函数旋转元素来创建箭头图标。rotate() 函数以角度作为参数，指定旋转的方向和旋转量。
border：此属性允许我们通过操纵元素边框的宽度和高度来创建三角形。
使用变换的 CSS 箭头
变换属性可用于通过使用rotate()函数旋转元素来创建箭头图标。rotate() 函数以角度作为参数，指定旋转的方向和旋转量。
例子
让我们看一个使用变换属性创建箭头的示例。
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.arrow {
display: inline-block;
margin-right: 30px;
width: 15px;
height: 15px;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
.right-arrow {
transform: rotate(45deg);
}
.left-arrow {
transform: rotate(-135deg);
}
.up-arrow {
transform: rotate(-45deg);
}
.down-arrow {
transform: rotate(135deg);
}
.top-narrow-arrow {
transform: rotate(-45deg) skew(-15deg, -15deg);
}
.top-wide-arrow {
transform: rotate(-45deg) skew(7deg, 7deg);
}
.top-left-arrow {
transform: rotate(-90deg) skew(-10deg, -10deg);
}
.top-right-arrow {
transform: rotate(0) skew(-10deg, -10deg);
}
.bottom-left-arrow {
transform: rotate(180deg) skew(-10deg, -10deg);
}
.bottom-right-arrow {
transform: rotate(90deg) skew(-10deg, -10deg);
}
</style>
</head>
<body>
<p class="arrow-container"><span class="arrow right-arrow"></span> - This arrow points to the right.</p>
<p class="arrow-container"><span class="arrow left-arrow"></span> - This arrow points to the left.</p>
<p class="arrow-container"><span class="arrow up-arrow"></span> - This arrow points upwards.</p>
<p class="arrow-container"><span class="arrow down-arrow"></span> - This arrow points downwards.</p>
<p class="arrow-container"><span class="arrow top-narrow-arrow"></span> - This arrow points top and is narrow.</p>
<p class="arrow-container"><span class="arrow top-wide-arrow"></span> - This arrow points top and is wide.</p>
<p class="arrow-container"><span class="arrow top-left-arrow"></span> - This arrow points top left.</p>
<p class="arrow-container"><span class="arrow top-right-arrow"></span> - This arrow points top right.</p>
<p class="arrow-container"><span class="arrow bottom-left-arrow"></span> - This arrow points bottom left.</p>
<p class="arrow-container"><span class="arrow bottom-right-arrow"></span> - This arrow points bottom right.</p>
</body>
</html>
使用边框的 CSS 箭头
border属性允许我们通过操纵元素边框的宽度和高度来创建三角形，从而产生箭头。
例子
以下示例演示了如何使用border属性来创建箭头：
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.left-arrow,
.right-arrow,
.up-arrow,
.down-arrow {
width: 0;
height: 0;
margin: 5px;
}
.left-arrow,
.right-arrow {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
.up-arrow,
.down-arrow {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
.right-arrow {
border-left: 25px solid #F10C0C;
}
.left-arrow {
border-right: 25px solid #F10C0C;
}
.up-arrow {
border-bottom: 25px solid #F10C0C;
}
.down-arrow {
border-top: 25px solid #F10C0C;
}
</style>
</head>
<body>
<p class="arrow-container"><span class="right-arrow"></span> - This arrow points to the right.</p>
<p class="arrow-container"><span class="left-arrow"></span> - This arrow points to the left.</p>
<p class="arrow-container"><span class="up-arrow"></span> - This arrow points to the upwards.</p>
<p class="arrow-container"><span class="down-arrow"></span> - This arrow points to the downwards.</p>
</body>
</html>
CSS 箭头样式
我们可以使用 CSS转换和边框属性使箭头看起来更时尚，如以下示例所示。
Transform -origin: center属性确保每个箭头的旋转都围绕其中心点进行。
例子
这是一个例子 -
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.left-arrow,
.right-arrow,
.up-arrow,
.down-arrow {
display: inline-block;
margin: 30px;
width: 15px;
height: 15px;
border-top: 2px solid #F10C0C;
border-left: 2px solid #F10C0C;
transform-origin: center;
}
.right-arrow {
transform: rotate(135deg);
}
.left-arrow {
transform: rotate(-45deg);
}
.up-arrow {
transform: rotate(45deg);
}
.down-arrow {
transform: rotate(-135deg);
}
.right-arrow::after,
.left-arrow::after,
.up-arrow::after,
.down-arrow::after {
content: "";
display: block;
width: 2px;
height: 45px;
background-color: #F10C0C;
transform: rotate(-45deg) translate(15px, 4px);
}
</style>
</head>
<body>
<p class="arrow-container">Right Arrow - <span class="right-arrow"></span></p>
<p class="arrow-container">Left Arrow - <span class="left-arrow"></span></p>
<p class="arrow-container">Up Arrow - <span class="up-arrow"></span></p>
<p class="arrow-container">Down Arrow - <span class="down-arrow"></span></p>
</body>
</html>
下拉箭头
您可以创建带有向下箭头图标的下拉按钮。当您将鼠标悬停在按钮上时，会出现下拉菜单。
例子
这是一个例子 -
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
width:98px;
}
.dropdown-btn {
background-color: #F10C0C;
color: #ffffff;
padding: 10px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
.dropdown-content {
width:98px;
display: none;
position: absolute;
background-color: #F10C0C;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-btn::after {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid white;
margin-left: 5px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-item {
padding: 10px;
text-decoration: none;
color: #ffffff;
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-btn">Dropdown</button>
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</body>
</html>
工具提示箭头
我们可以使用CSS边框和transform属性创建一个带有向上三角形箭头的工具提示 。当您将鼠标悬停在文本上时，工具提示将显示，并在鼠标光标从文本移开时消失。
例子
这是一个例子 -
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltipcontent {
display: none;
position: absolute;
background-color: #F10C0C;
color: #fff;
padding: 8px;
border-radius: 4px;
z-index: 1;
font-size: 14px;
white-space: nowrap;
}
.tooltip:hover .tooltipcontent {
display: block;
}
.tooltipcontent::before {
content: "";
position: absolute;
border-width: 6px;
border-style: solid;
border-color: transparent transparent #F10C0C transparent;
top: -12px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<p>Bring the cursor over Tutorials Point to see the result </p>
<h3 class="tooltip">Tutorials Point
<span class="tooltipcontent">CSS - Arrow</span>
</h3>
</body>
</html>
动画 CSS 箭头
通过使用 CSS 动画，我们可以创建移动和脉冲的箭头，为网页添加动态效果。以下示例演示了一个上下移动的动画箭头。为了创建动画箭头，我们使用CSS 中的@keyframes规则来定义一组将应用于箭头的动画。
<html>
<head>
<style>
.arrow-container {
display: flex;
align-items: center;
}
.left-arrow
{
width: 0;
height: 0;
margin: 5px;
}
.left-arrow
{
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
.left-arrow {
border-right: 25px solid #F10C0C;
}
.arrow-move {
position: relative;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<p class="arrow-container"><span class="left-arrow arrow-move"></span> - This arrow points to the left.</p>
</body>
</html>