Html CSS形状-三角形设计

我们能否仅使用CSS创建以下图像？

我能够创建一个直角三角形。但我无法创建这个特定形状的三角形。任何帮助都将不胜感激

直角三角形设计的代码：

三角形， #三角形3{ 宽度：0； 身高：0； 边框宽度：100px 0 100px； 边框样式：实心； 边框颜色：透明#ff0033； 浮动：左； } #三角形2， #三角形4{ 宽度：0； 身高：0； 边框宽度：0 100px 100px 0； 边框颜色：透明#294fa3透明； 边框样式：实心； 浮动：左； 位置：相对位置； 左：-100px； } #三角形3{ 位置：相对位置； 左：-100px； } #三角形4{ 位置：相对位置； 左：-200px； /*专门为4*/ }

---

这可以使用单个

div

元素和：伪元素和

transform:skew（）

div，div:after{
位置：相对位置；
宽度：0；
身高：0；
右边框：200px固体#2B3FA5；
边框底部：75px实心#FF0000；
变换：倾斜（-35度）；
左边距：30px；
}
部门：之后{
位置：绝对位置；
内容：''；
左：200px；
变换：倾斜（0度）；
左边距：0px；
}

引用语用学： “不太支持转换”

所以我找到了一条没有它的出路： HTML:

这是小提琴：

我同意我的答案是长的，CSS3可以得出这样的背景：

HTML:

<div></div>

div {
  background-image: linear-gradient(to top right, red 50%, blue 50%);
  background-size: 50% 100%;

  transform: skewX(-35deg);
  transform-origin: 0 100%;
}

输出图像：

<div></div>

div {
  background-image: linear-gradient(to top right, red 50%, blue 50%);
  background-size: 50% 100%;

  transform: skewX(-35deg);
  transform-origin: 0 100%;
}

正文{
背景：线性梯度（浅绿色、绿色）；
最小高度：100vh；
保证金：0；
}
div{
背景图像：线性渐变（右上角，红色50%，蓝色50%）；
背景大小：50%100%；
变换：skewX（-35度）；
变换原点：0.100%；
宽度：400px；
高度：100px；
利润率：20px；
}

使用

变换：skewx（）我试过skewx，它只会使元素的定位复杂化。实际上，这些三角形是列表中的独立的li（带图标）。所以我想要一个单独的解决方案。@JakeMikail:一个问题，因为你已经指出它是一个列表。您想要三角形中的内容吗？如果是的话，那么用边界黑客完成三角形可能不是最好的选择。@JakeMikail-为什么？你看到了什么？什么都没有。上面有一个导航栏。身体完全是空白的。请贴在小提琴上！谢谢你。@JakeMikail-。顺便提一下我把这些三角形放在了四个不同的
li
s中！我还编辑了我的答案，广告中添加了一个无变换的sol。请看。@TheParagatick+1作为您的方法是一种短得多的方法：）我刚刚将选择器分组。如果你也这样做，你的代码片段会比我的小：）@TheParagatick你注意到三角形2 div没有关闭。当我关闭标记时，模式会变得混乱。你知道会发生什么吗？或者我应该把它作为另一个问题发布：）是的。这是因为如果不关闭标记，它最终会关闭。因此，应用于div2的样式现在也应用于div2、3和4！