CSS实心箭头|极客教程

CSS实心箭头

在web开发中，我们经常会需要使用箭头来指示某个元素或表示某种行为。在本文中，我们将学习如何使用纯CSS来创建实心箭头。

实心箭头的基本样式

首先，让我们从一个简单的实心箭头开始。我们将使用CSS的::after和::before伪元素来创建箭头的形状。下面是一个基本的示例：

.arrow {
  position: relative;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid black;
}

.arrow::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid black;
}

在上面的代码中，我们创建了一个带有下箭头的div元素，并使用::before伪元素创建了一个相同形状的箭头，然后将其放置在原箭头的上方。这样就形成了一个实心箭头。你可以根据需要调整箭头的大小和颜色。

实心箭头的上、下、左、右方向

接下来，让我们分别创建朝上、朝下、朝左和朝右的实心箭头。以下是对应的代码：

朝上箭头

.arrow-up {
  position: relative;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid black;
}

.arrow-up::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid black;
}

朝下箭头

.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid black;
}

.arrow-down::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid black;
}

朝左箭头

.arrow-left {
  position: relative;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid black;
  border-bottom: 20px solid transparent;
}

.arrow-left::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid black;
  border-bottom: 20px solid transparent;
}

朝右箭头

.arrow-right {
  position: relative;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 20px solid black;
  border-bottom: 20px solid transparent;
}

.arrow-right::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 20px solid black;
  border-bottom: 20px solid transparent;
}

以上代码块分别创建了朝上、朝下、朝左和朝右的实心箭头。你可以根据需要调整箭头的大小和颜色。

通过className指定箭头方向

有时候我们可能需要在同一个页面中显示不同方向的箭头。为了方便实现这一目的，我们可以为箭头添加不同的className来指定箭头的方向。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arrow Directions</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="arrow arrow-up"></div>
  <div class="arrow arrow-down"></div>
  <div class="arrow arrow-left"></div>
  <div class="arrow arrow-right"></div>
</body>
</html>

在上面的示例中，我们在四个不同的div元素上分别添加了不同的className来指定箭头的方向。这样就可以在同一个页面上显示朝上、朝下、朝左和朝右的箭头了。