Question

我知道这个问题在另一种形式中非常受欢迎： How do CSS triangles work?

我已经广泛阅读了整个帖子，但它没有解决我想要做的事情。

我想制作一个反应灵敏的跨浏览器等边三角形剪辑。

我发现很多像这样使用像素的CSS：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid red;
}

但它没有回应。我目前正在使用下面的多边形绘制它，如下所示：

.tri-Up {
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

但这与Firefox不兼容。我已经探索了这个问题好几个星期，但还没有找到一种方法来修剪等边三角形，让它具有响应性，并让它在firefox，chrome和Safari中运行。

任何想法或尝试/成功都将获得我的赞赏和尊重。

Answer 1

是的，可以做到，我需要一段时间，并找到解决这个问题的权利 here ：

您可以使用<div>或其他一些您认为可以代表三角形的内容，以及一个:pseudo选择器（实际上您可以使用2x <div>并忽略{ {1}}选择器）
:pseudo选择器可用于表示三角形本身，就像您在问题中发布的:pseudo道具一样。
父border就像一个掩码，它使用 width 和 padding 的组合缩小/增长<div>选择器 percetage
随着这个面具的增长，你的容器会显示更多的三角形，一旦它收缩，它就会覆盖三角形
:pseudo元素上设置的border道具就像三角形将会增长的:pseudo，因此您可以指定一些更大的值，直到您认为将需要的最大值

此解决方案作者的称赞，以及有关此内容的更多内容：

查看 demo here 或下面的摘录：

max-width

*,
*:after,
*before {
  box-sizing: border-box;
}
h3 {
  margin: 10px;
  text-align: center;
}
.small-container {
  max-width: 10%;
  float: left;
}
.medium-container {
  max-width: 30%;
  float: left;
}
.large-container {
  float: left;
  max-width: 50%;
}
.fancy-triangle {
  width: 50%;
  height: 0;
  padding-left: 50%;
  padding-bottom: 50%;
  overflow: hidden;
}
.fancy-triangle:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -2000px;
  border-left: 2000px solid transparent;
  border-right: 2000px solid transparent;
  border-bottom: 2000px solid #4679BD;
}

<强>更新

好的，因为你需要在sorta响应三角形中实际掩盖图像，上面的方法不会削减它。

相反，您可以使用<h3>Now isnt that nice?</h3> <div class='fancy-triangle'></div>和一些百分比 svg点，如下所示：

使用clip path绘制一个三角形，如果剪辑路径无法正常工作，则用于剪切图像自定义点/形状
然后使用剪辑路径绘制一个三角形，其中自定义百分点代表一个三角形

或者，您可以在svg包装器上使用绝对位置，并将宽度/高度设置为某个百分比值，这些值将绑定到具有相对位置的设置父级，然后随之增长/缩小

更新V3

除了使用<img>标记外，您还可以使用<img>和<svg> attr的图像，而且它应该非常好用。

src

.fancy-triangle-image {
    max-width: 1200px;
    -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    clip-path: url(#triangle);
}
.fancy-triangle-image img{
    width: 100%;
}

Answer 2

我能想到的最好的选择是在三角形上使用vw作为你的单位，因为这是你可以在border属性中使用的唯一响应单位。请点击此处http://sassmeister.com/gist/1b0d70bf4cc35ff05fec

浏览器对vw的支持非常好。 http://caniuse.com/#search=vw

CSS响应，等边三角形，用于Firefox

2 个答案: