响应式CSS三角形,百分比宽度

下面的代码将在< a>元件：

JSFiddle

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

问题是我们必须指出链接宽度以获得适当大小的箭头，因为我们无法指出边框宽度(以像素为单位)。

如何使基于百分比的响应三角形？

解决方法

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

DEMO(调整结果窗口大小，看看它如何反应)

三角形的宽高比与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;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(-30deg) skewX(30deg);
  -ms-transform: rotate(-30deg) skewX(30deg);
  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>

有关响应三角形的更多信息以及如何制作它们，您可以看一下
Triangles with transform rotate(简单而花式的三角形)

原文地址：https://www.jb51.cc/css/219415.html