响应的钝角三角形css

Question

我一直在寻找有关此问题的答案。

是否可以在html / css或JS中制作响应的钝角三角形？

我想制作一个这样的三角形：

钝角三角形示例：

我确实知道如何使用边框技巧制作三角形，但我无法弄清楚如何制作有角度的三角形。

我希望你们能帮忙并有一个聪明的把戏。

祝你好运 勒夫

Answer 1

这是一种使用线性渐变的简单方法：

＆＃13;

＆＃13;

body {
  margin:0;
  height:100px;
  background:linear-gradient(to top right,transparent 50%, blue 51%) 0 0/20% 100% no-repeat,
  linear-gradient(to top left,transparent 50%, blue 51%) 100% 0/calc(80% + 1px) 100% no-repeat;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用不同宽度的边框

div {
  margin: 1em auto;
  height: 0;
  width: 0;
  border-color: red transparent transparent transparent;
  border-style: solid;
  border-width: 250px 250px 0px 50px;
}

<div></div>