带有百分比宽度的自适应CSS三角形

Question

下面的代码将在<a>元素下方创建一个箭头：

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

}


<a href="#" class="btn">Hello!</a>

问题在于，我们必须指示链接宽度才能获得适当大小的箭头，因为我们无法以像素为单位指示边框宽度。

如何使响应三角形百分比为基础？

Answer 1

您可以使用倾斜和旋转的伪元素在链接下创建一个 响应三角形 ：

三角形通过padding-bottom属性保持其长宽比。

如果您希望形状根据其内容来适应其大小，则可以删除.btn类的宽度

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

}

/** FOR THE DEMO **/



body {

  background: url('http://i.imgur.com/qi5FGET.jpg');

  background-size: cover;

}


<a href="#" class="btn">Hello!</a>