响应CSS三角形与百分比宽度 [英] Responsive CSS triangle with percents width

问题描述

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

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

<a href="#" class="btn">Hello!</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;   
}

JSFiddle

问题是，我们必须指明链接宽度以获得适当大小的箭头，因为我们不能指示边框宽度（以像素为单位）。

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

有关响应三角形的更多信息以及如何创建它们，您可以查看
三角形与变形旋转 （简单和花式三角形）

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

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