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

Question

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

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

如何制作响应三角形百分比？

Answer 1

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

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

有关响应三角形以及如何制作它们的更多信息，您可以查看Triangles with transform rotate（简单和奇特的响应三角形）

Answer 2

另一个解决方案是使用CSS剪辑路径从彩色块中剪切三角形。但是没有IE支持，但可以用于内部工具等。

DEMO

用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 3

我发现适用于任何宽度/高度的解决方案。你可以使用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%)
}

Answer 4

以下代码的修改版本可以帮助您实现此目的

HTML

<div class="triangle-down"></div>

CSS

.triangle-down {
    width: 10%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;

    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 500px solid #4679BD;
}

有关响应三角形的进一步阅读：Responsive CSS Triangles

Answer 5

我尝试了其他答案，发现它们太复杂和/或难以操纵三角形的形状。我决定创建一个简单的三角形作为svg。

三角形高度可以设置为绝对值，也可以设置为矩形的百分比，以便在必要时可以在两个方向上进行响应。

html, body{
  height:100%;
  width:100%;
}
.outer{
  width:20%;
  height:25%;
  background:red;
  position:relative;
  
}
.inner{
  height:100%;
  width:100%;
  background-color:red;
}
.triangle-down{
  height:25%;
  width:100%;
  position:relative;
}
.triangle-down svg{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}
svg .triangle-path{
  fill:red;
}

<div class="outer">
<div class="inner"></div>
  <div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
 <g>
  <path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
 </g>
</svg>
</div>

经过测试的FF，Chrome，IE，Edge，mob Safari和暴徒Chrome

Answer 6

我接受了@ Probocop的回答并提出以下建议：

<style>
    .btn {
        background-color: orange;
        color: white;
        margin-bottom: 50px;
        padding: 15px;
        position: relative;
        text-align: center;
        text-decoration: none;
    }

    .btn:after {
        background-color: inherit;
        clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        content: '';
        height: 50px;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
    }
</style>

<a href="#" class="btn">Hello!</a>

这适用于Chrome，我添加了Firefox修复程序。它在Edge中不起作用，但是如果你减小向下箭头的高度，那么它看起来并不那么糟糕。

请注意，如果您使用的是bootstrap，则需要更改名称或覆盖它应用的某些样式。如果您决定重命名它，那么您还需要将以下内容添加到.btn样式：

box-sizing: content-box;