具有百分比宽度的响应式 CSS 三角形 [英] Responsive CSS triangle with percents width

问题描述

下面的代码将在 元素正下方创建一个箭头:

The code below will create an arrow right below an <a> element:

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>

问题是我们必须指定链接宽度才能获得合适大小的箭头，因为我们无法以像素为单位表示边框宽度.

The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.

如何制作基于三角形的响应式百分比?

推荐答案

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

You could use a skewed and rotated pseudo element to create a responsive triangle under the link :

DEMO(调整结果窗口的大小以查看效果如何反应)

DEMO (resize the result window to see how it reacts)

三角形通过 padding-bottom 属性保持其纵横比.

The triangle maintains it's aspect ratio with the padding-bottom property.

如果你想让形状根据它的内容适应它的大小，你可以在 .btn 类中删除宽度

If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class

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

有关响应式三角形以及如何制作它们的更多信息，您可以查看带变换旋转的三角形(简单而花哨的响应式三角形)

For more info on responsive triangles and how to make them, you can have a look at Triangles with transform rotate (simple and fancy responsive triangles)

这篇关于具有百分比宽度的响应式 CSS 三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！