带有百分比宽度的自适应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

对此的另一种解决方案是使用CSS剪切路径将三角形从彩色块中剪切出来。不支持IE，但是可以用于内部工具等。

为方便起见，与SCSS一起编写。

.outer {

  background: orange;

  width: 25%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  padding: 1em;

  p {

    margin: 0;

    text-align: center;

    color: #fff;

  }

  &:after {

    content: '';

    position: absolute;

    top: 100%;

    left: 0; 

    right: 0;

    padding-bottom: 10%;

    background: orange;

    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

  }

}

Answer 2

我找到了适用于任何宽度/高度的解决方案。您可以在linear-gradient背景中使用两个伪元素，例如（fiddle）：

.btn {

    position: relative;

    display: inline-block;

    width: 100px;

    height: 50px;

    text-align: center;

    color: white;

    background: gray;

    line-height: 50px;

    text-decoration: none;

}

.btn:before {

    content: "";

    position: absolute;

    top: 100%;

    right: 0;

    width: 50%;

    height: 10px;

    background: linear-gradient(to right bottom, gray 50%, transparent 50%)

}

.btn:after {

    content: "";

    position: absolute;

    top: 100%;

    left: 0;

    width: 50%;

    height: 10px;

    background: linear-gradient(to left bottom, gray 50%, transparent 50%)

}