CSS三個(gè)線條變箭頭的技巧

在CSS中，我們可以使用偽元素和線性漸變來(lái)將三個(gè)線條變成箭頭，我們需要?jiǎng)?chuàng)建一個(gè)包含三個(gè)線條的HTML元素，然后使用CSS的偽元素來(lái)擴(kuò)展每個(gè)線條，形成箭頭的形狀。

下面是一個(gè)簡(jiǎn)單的示例代碼：

HTML:

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

CSS:

.arrow {
  position: relative;
  width: 0;
  height: 0;
}
.line {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, #000, transparent);
}
.line:nth-child(1) {
  top: 0;
  left: 0;
  transform: rotate(60deg);
}
.line:nth-child(2) {
  top: 0;
  left: 50%;
  transform: rotate(120deg);
}
.line:nth-child(3) {
  top: 0;
  left: 100%;
  transform: rotate(180deg);
}

在這個(gè)示例中，我們使用了三個(gè)偽元素來(lái)擴(kuò)展每個(gè)線條，形成箭頭的形狀，每個(gè)偽元素都使用了線性漸變來(lái)創(chuàng)建箭頭的外觀，并通過(guò)旋轉(zhuǎn)來(lái)調(diào)整箭頭的方向，我們將這三個(gè)偽元素組合在一起，形成了一個(gè)完整的箭頭形狀。