自适应三角形divs

Question

我需要创建一个响应三角形 <div>。我可以使用倾斜的 css 创建它，但是当我更改屏幕宽度它弄乱了时，它没有响应。有人能帮我吗？提前非常感谢您！

这就是我想要的：

这是我到目前为止的代码：

.skewed-box-one:before {
background-color: red;
content: '';
height: 100px;
width: 30.05%;
display: block;
visibility: visible;
position: absolute;
top: -40px;
transform: skewY(8deg);
border-top: 3px solid #BBDEFB;
}

.skewed-box-one:after {
background-color: red;
content: '';
height: 130px;
width: 70%;
display: block;
visibility: visible;
position: absolute;
top: -46px;
right: 0;
transform: skewY(-4deg);
border-top: 3px solid #BBDEFB;
}

<div class="skewed-box-one"></div>

Answer 1

您可以使用CSS clip-path，请注意broswer support受限制。使用this tool，您可以生成所需的形状。

.triangle1 {
  clip-path: polygon(50% 0%, 100% 84%, 100% 100%, 0 100%, 0 84%);
  background: red;
  width: 100%;
  height: 100%;
}

.triangle2 {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);;
  background: red;
  width: 100%;
  height: 100%;
}

.container {
  width: 50%;
  height: 300px;
  margin-bottom: 20px;
}

<div class="container">
  <div class="triangle1">1</div>
</div>

<div class="container">
  <div class="triangle2">2</div>
</div>

Answer 2

我可以使用clip-path通过@SuperDJ帮助解决此问题。我还发现该网站有助于绘制形状：

https://bennettfeely.com/clippy/

这是我使用的最终代码：

.triangle1 {
  position: absolute;
  -webkit-clip-path: polygon(21% 96%, 0 54%, 100% 54%);
  clip-path: polygon(21% 96%, 0 54%, 100% 54%);
  background: #BBDEFB;
  width: 100%;
  height: 200px;
  margin-top: -40px;
}

非常感谢所有尝试提供帮助的人，特别感谢@SuperDJ！

Answer 3

使用背景色比clip-path更受支持

.box-down {
  height:80px;
  padding-bottom:50px;
  background:
    linear-gradient(to bottom right,red 48%, transparent 50%) bottom right/30% 50px,
    linear-gradient(to bottom left ,red 48%, transparent 50%) bottom left/70.1% 50px,
    red content-box;
  background-repeat:no-repeat;
}

.box-up {
  height:80px;
  padding-top:50px;
  background:
    linear-gradient(to top right,red 48%, transparent 50%) top right/70% 50px,
    linear-gradient(to top left ,red 48%, transparent 50%) top left /30.1% 50px,
    red content-box;
  background-repeat:no-repeat;
  margin-top:20px;
}

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

<div class="box-up"></div>