如何建立具有百分比寬度的響應式 CSS 三角形？

產生具有百分比寬度的響應式CSS 三角形

問題：

在 下面建立箭頭使用CSS的元素可能會很棘手，因為箭頭的邊框寬度不能以像素設定。這使得實現響應式三角形變得困難。

解：

要使用 CSS建立響應式三角形，可以使用傾斜和旋轉的偽三角形

實現：

1. 建立外容器：

   .btn {
     position: relative;
     display: inline-block;
     width: 100px;  /* Set a fixed width for demonstration purposes */
     height: 50px;
   }

2. 加上三角形：

   .btn:after {
     content: "";
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 0;
     height: 0;
     border-width: 10px 50px 0 50px;
     border-style: solid;
     border-color: gray transparent transparent transparent;   
   }

回應版本：

要讓三角形回應，請將三角形回應，請將三角形回應，請將三角形回應外部容器和三角形樣式修改為如下：

1. 響應式容器：

   .btn {
     position: relative;
     display: inline-block;
     width: 50%;  /* Set a percentage width for responsiveness */
     height: 50px;
   }

2. 響應式三角形：

   .btn:after {
     top: 50px;  /* Adjust the top position */
     background-color: inherit;
     padding-bottom: 50%;
     width: 57.7%;
     transform-origin: 0 0;
     transform: rotate(-30deg) skewX(30deg);
   }

注意： padding-bottom 屬性保持三角形的縱橫比。刪除 .btn 上的寬度允許形狀根據其內容調整其大小。

此 CSS 實作建立一個具有基於百分比寬度的三角形，該三角形保持其縱橫比並根據容器的尺寸調整其大小.

以上是如何建立具有百分比寬度的響應式 CSS 三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！