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

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

下面提供的代码生成一个位于 下方的箭头。 element:

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

这种方法确保三角形通过 padding-bottom 属性保持其纵横比。删除 .btn 类上的 width 属性允许三角形根据其内容调整其大小，使其完全响应。

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