响应式CSS三角形，根据其父元素调整大小

Question

我正在尝试构建一个CSS三角形，它根据父元素的宽度自动调整大小。

目前，我已经为所创建的三角形设置了自定义大小，因此在调整大小时，三角形开始超出父元素。但是我需要三角形在调整大小时保持在父元素内部，但是占用整个宽度。请帮忙。谢谢。

以下是我的HTML和CSS代码：

.triangle-container{
  width:50%;
  height:200px;
  background-color: #000000;
}
.triangle{
  width:0;
  height:0;
  border-left:167px solid rgba(0,0,0,0);
  border-right:167px solid rgba(0,0,0,0);
  border-top:100px solid red;
}

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

- Kanishka

---

通过使用jQuery，您可以获取外部元素的高度和宽度，并将其赋予内部元素，这是您正在寻找的吗？ - Swap

有没有其他方法可以实现这一点，而不使用jQuery（仅使用CSS）@Anthony？ - Kanishka

@aug...我该如何添加“代码片段”功能？ - EaziLuizi

@Lost 相关博客文章。如果您在发布答案/问题时查看GUI，可以在插入图像图标旁边找到一个小代码片段图标以插入代码。 - aug

@Lost 当然没问题 :) 我已经更新了你的答案，展示了一个代码片段。 - aug

Answer 1

一种可能性：使用多重背景来创建三角形。该元素设置为占据父元素高度的一半，并且拥有完整的宽度。

.triangle-container{
  width:50%;
  height:200px;
  background-color: #000000;
}
.triangle{
  width:100%;
  height:50%;
  background-image: linear-gradient(to top right, transparent 50%, red 50%),
    linear-gradient(to top left, transparent 50%, red 50%);
  background-size: 50.2% 100%;
  background-repeat: no-repeat;
  background-position: top left, top right;
}

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

- vals

---

我看到这种解决方案存在的问题是三角形边界有锯齿状边缘。有没有一种方法可以使边框线条平滑？ - Fiddle Freak

Answer 2

这不是一个三角形，但看起来你想要制作一个信封形状...所以这是我会怎么做的，相应地更改边框等：

.triangle-container {
  width: 50%;
  height: 200px;
  padding-left: 25%;
  padding-top: 25%;
  overflow: hidden;
  background-color: #000000;
}
.triangle {
  width: 50%;
  height: 0;
  margin-left: -500px;
  margin-top: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-top: 500px solid #4679BD;
}

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

编辑：对于三角形的形状更改，请将以下CSS属性更改为triangle-container：

        width: 100%;            
        padding-left: 50%;
        padding-top: 50%;

和三角形：

        width:0;

- EaziLuizi

Answer 3

您可以尝试使用视口相对单位，类似于以下内容：

.triangle-container{
  width:50%;
  height:500px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}
.triangle{
  width:50vw;
  height:50vw;
  position: absolute;
  top: -50vw;
  transform: rotate(45deg);
  background: purple;
}

Preview: http://codepen.io/anon/pen/LEdREr?editors=110

- Michal Lison