如何使用百分比创建响应式 CSS 三角形？

具有百分比宽度的响应式 CSS 三角形

下面的 CSS 代码在 元素正下方创建一个箭头：

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}

.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;   
}

但是，这种方法需要指定链接的宽度才能实现所需的箭头 尺寸。要创建根据链接宽度缩放的响应式三角形，请使用以下代码：

.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 类中删除宽度。

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