告别切图：用CSS手写箭头，创意无限！

前端

2024-01-31 08:40:53

告别切图：用CSS手写箭头，创意无限！

在网页设计中，箭头元素随处可见，它们扮演着指引、装饰、连接等重要角色。然而，传统的手工切图方式不仅耗时费力，而且难以灵活调整。今天，我们将介绍一种全新的方法——用CSS手写箭头，让你在设计中尽情发挥创意，告别切图烦恼！

实现思路

用CSS直接实现箭头肯定会比较麻烦，我们换个思路：把箭头顺时针旋转45度看成半个正方形：

聪明的同学肯定想到了，这不就是传说中的等腰直角三角形吗？没错，我们接下来要做的就是用CSS创建一个等腰直角三角形，然后旋转45度，就可以得到一个漂亮的箭头了。

样式设计

等腰直角三角形很容易用CSS实现，只需要用到border属性即可。具体代码如下：

.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid red;
}

这样，我们就得到了一个红色的等腰直角三角形。接下来，只需要把它旋转45度即可：

.arrow {
  transform: rotate(45deg);
}

现在，你就可以看到一个漂亮的红色箭头了。当然，你也可以根据自己的需要调整箭头的颜色、大小和位置。

案例展示

用CSS手写箭头的方法非常灵活，可以应用在各种不同的场景中。比如，你可以用它来制作分页箭头、导航箭头、下拉菜单箭头等等。下面是一些案例展示：

分页箭头：

<ul class="pagination">
  <li><a href="#">上一页</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">下一页</a></li>
</ul>

.pagination li {
  float: left;
  margin-right: 10px;
}

.pagination li a {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
}

.pagination li a:hover {
  background-color: #eee;
}

.pagination li.active a {
  background-color: #007bff;
  color: #fff;
}

.pagination li.disabled a {
  color: #ccc;
}

.pagination .arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #007bff;
  transform: rotate(45deg);
}

导航箭头：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

nav ul {
  list-style-type: none;
  display: flex;
}

nav li {
  margin-right: 10px;
}

nav li a {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
}

nav li a:hover {
  background-color: #eee;
}

nav li.active a {
  background-color: #007bff;
  color: #fff;
}

nav li.disabled a {
  color: #ccc;
}

nav .arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #007bff;
  transform: rotate(45deg);
}

下拉菜单箭头：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

.dropdown {
  position: relative;
}

.dropdown-toggle {
  display: block;
  width: 100%;
  padding: 5px 10px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: 1px solid #007bff;
  border-radius: 4px;
}

.dropdown-toggle:hover {
  background-color: #0069d9;
}

.dropdown-toggle:focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0069d9;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 100%;
  padding: 5px 0;
  margin: 0;
  font-size: 14px;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.dropdown-menu li {
  display: block;
  padding: 3px 10px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

.dropdown-menu li:focus {
  color: #fff;
  background-color: #007bff;
}

.dropdown-menu li:active {
  color: #fff;
  background-color: #0069d9;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #fff;
  transform: rotate(45deg);
}