如何使用 CSS 技術建立 V 形箭頭？-css教學-PHP中文網

如何使用 CSS 技術建立 V 形箭頭？

Mary-Kate Olsen

發布： 2024-11-04 07:35:31

原創

783 人瀏覽過

How can I create a Chevron Arrow using CSS Techniques?

使用CSS 技術實現V 形箭頭

使用CSS 建立一個V 形箭頭，其特徵是兩條對角線相交於一點，可以是透過各種方法完成。

一種方法利用偽元素，例如 before 或 after，它們與 CSS 屬性一起應用。透過添加前後元素、旋轉它們並策略性地定位它們，就形成了箭頭形狀。或者，您可以為 before 元素新增兩個邊框，並使用 Transform:rotate 旋轉它。

另一種方法涉及使用實際的 HTML 元素而不是偽元素。這可以透過將箭頭作為項目符號合併到清單中來完成。透過使用 em 單位作為箭頭尺寸，您可以確保它們根據清單的字體大小適當縮放。

以下 CSS 程式碼示範了後者：

<code class="css">ul {
  list-style: none;
}

ul.big {
  list-style: none;
  font-size: 300%
}

li::before {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}

li:hover {
  color: red; /* For the text */
}

li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}</code>

登入後複製

HTML 程式碼顯示用法：

<code class="html"><ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

<ul class="big">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul></code>

登入後複製

以上是如何使用 CSS 技術建立 V 形箭頭？的詳細內容。更多資訊請關注PHP中文網其他相關文章！