CSS - 箭头

上一页
下一页

什么是css箭头？

箭头在用户界面中用于指导用户并帮助他们理解信息流。它们提供视觉线索来导航不同的操作。

箭头是改善用户体验的有效方法。它们用于工具提示、下拉菜单、导航元素等。这样可以更轻松地指导用户完成整个过程。

可以使用下面列出的 CSS 属性创建箭头：

  • transform：此属性可用于通过使用 rotate（） 函数旋转元素来创建箭头图标。rotate（） 函数将角度作为其参数，它指定了旋转的方向和数量。
  • border：此属性允许我们通过操纵元素边框的宽度和高度来创建三角形。

使用转换的 CSS 箭头

transform 属性可用于通过使用 rotate（） 函数旋转元素来创建箭头图标。rotate（） 函数以角度作为其参数，它指定旋转的方向和数量 -

例

让我们看一个使用 transform 属性创建箭头的示例。


<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;
	 	}
	 	.dropdown-btn {
	 	 	 background-color: #F10C0C;
	 	 	 color: #ffffff;
	 	 	 padding: 10px;
	 	 	 border: none;
	 	 	 cursor: pointer;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	}
	 	.dropdown-content {
	 	 	 display: none;
	 	 	 position: absolute;
	 	 	 background-color: #28992e;
	 	 	 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>
	 	<h3 class="tooltip">Tutorialspoint
	 	 	 <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>
打印本页
上一页
下一页