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

  • Z时代
  • 2024-01-10
  • 分类：问答

下面的代码将在<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>

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

回答：

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

三角形通过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>

以上是 带有百分比宽度的自适应CSS三角形 的全部内容， 来源链接： utcz.com/qa/408297.html

回到顶部