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>

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>

Answer 2

K这不是一个三角形，但看起来你试图制作一个信封形状......所以我会这样做，相应地更改边框等：

.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属性更改为：

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

和三角形：

        width:0;

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

预览： http://codepen.io/anon/pen/LEdREr?editors=110

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

3 个答案: