如何使用 CSS 建立空心 V 形箭頭？

使用CSS 建立V 形箭頭

問題

使用CSS，您可以輕鬆建立一個填滿的三角形，如程式碼片段所示：

<code class="css">#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}</code>

但是如何建立一個空心的箭頭狀三角形，如下圖所示？

[V 形箭頭圖片]

答案

您可以使用 CSS 的 before 或 after 偽元素來建立這種類型的箭頭。以下是流程的細分：

• 將 before 或 after 偽元素加入所需的元素。
• 套用 CSS 樣式來自訂偽元素的外觀和位置。

例如，您可以使用以下 CSS：

<code class="css">::before {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid black;
    border-right: 1px solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}</code>

此 CSS 建立一個帶有黑色輪廓的空心三角形，旋轉 45 度。您可以調整寬度、高度和邊框屬性來自訂外觀。

或者，您也可以在不使用偽元素的情況下實現此效果：

• 建立一個新的
• 跨度>或
  HTML 中的元素。 使用 CSS 將元素設定為箭頭樣式，包括其大小、顏色和旋轉。

  <code class="css">.chevron {
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-top: 1px solid black;
      border-right: 1px solid black;
      transform: rotate(45deg);
      margin-right: 0.5em;
  }</code>

  登入後複製

  以下範例：

  在這種情況下，您可以將 .chevron 類別加入您想要的元素來建立箭頭效果。

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