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

使用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">&lt;ul&gt;
  &lt;li&gt;Item1&lt;/li&gt;
  &lt;li&gt;Item2&lt;/li&gt;
  &lt;li&gt;Item3&lt;/li&gt;
  &lt;li&gt;Item4&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class=&quot;big&quot;&gt;
  &lt;li&gt;Item1&lt;/li&gt;
  &lt;li&gt;Item2&lt;/li&gt;
  &lt;li&gt;Item3&lt;/li&gt;
  &lt;li&gt;Item4&lt;/li&gt;
&lt;/ul&gt;</code>

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