如何创建具有基于百分比宽度的响应式 CSS 三角形？

基于百分比宽度的响应式 CSS 三角形

在 CSS 中，我们可以通过为顶部和顶部设置不同的宽度来使用边框创建三角形。底部边框。但是，当链接宽度使用百分比时，箭头的大小无法根据链接的内容动态调整。

解决方案：基于百分比的三角形

创建一个响应式三角形使其大小适应链接的内容，我们可以使用带有倾斜和旋转的伪元素转换：

.btn {
  ...
  padding-bottom: 15%;
  ...
}

.btn:after {
  content: "";
  ...
  padding-bottom: 50%;
  ...
  transform: rotate(-30deg) skewX(30deg);
}

说明：

• 伪元素绝对定位，背景颜色继承自链接。
• padding-bottom 属性（本例中为 15%）将三角形的高度设置为链接高度的百分比宽度。
• 倾斜和旋转三角形可创建所需的形状。
• 负 z 索引可确保三角形位于链接内容的后面。

优点：

• 三角形的大小会根据链接的宽度。
• 三角形的纵横比保持不变。

以上是如何创建具有基于百分比宽度的响应式 CSS 三角形？的详细内容。更多信息请关注PHP中文网其他相关文章！