CSS制作灰色箭頭

在CSS中制作灰色箭頭，我們可以使用CSS的偽元素和線性漸變來實(shí)現(xiàn)，下面是一個(gè)簡(jiǎn)單的示例代碼：

HTML結(jié)構(gòu)：

<div class="arrow"></div>

CSS樣式：

.arrow {
  position: relative;
  width: 20px;
  height: 20px;
  background-image: linear-gradient(to right, #888, #888);
}
.arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: #888 #888 #888 transparent;
}
.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: #888 #888 #888 transparent;
}

這個(gè)示例代碼會(huì)生成一個(gè)灰色的箭頭，箭頭的長(zhǎng)度和寬度都是20像素，我們使用偽元素::before和::after來繪制箭頭的兩側(cè)，通過調(diào)整border-width和border-color屬性來控制箭頭的樣式，我們將整個(gè)箭頭元素設(shè)置為相對(duì)定位，以便它可以與其他元素進(jìn)行相對(duì)定位。