如何在 CSS 中创建响应式基于百分比的三角形？

CSS：生成基于百分比的响应式三角形

使用 CSS 在超链接元素下方创建箭头，但指定以像素为单位的边框宽度限制了响应能力。本文演示了一种采用倾斜和旋转伪元素来实现基于百分比调整大小的三角形的解决方案。

响应式三角形实现

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

在“.btn”类，我们删除了固定宽度，允许三角形的大小适应内容的宽度。 “.btn:after”伪元素绝对定位、skewX 并旋转以创建三角形，其背景颜色与按钮的背景相匹配。

通过使用 padding-bottom，我们保持了三角形的纵横比。这种方法可确保三角形保持响应，并根据超链接中的文本内容和 URL 按比例调整大小。

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