css中的右/左侧三角形

您好，我正在努力做到以下几点：

在容器高度上三角形应为40%左右，宽度为50%，在中间相遇。

我一直在试着做类似的东西。。但是到目前为止还没有成功

环顾四周，到目前为止，我还没有找到任何有用的东西

我的代码：

div{
身高：373px；
宽度：0px；
利润率：26px；
显示：内联块；
}
.左{
边框底部：100px实心#ff0；
左边框：320px实心透明；
}
.对{
边框底部：100px实心#f00；
右边框：320px实心透明；
}
标题{
边框：2件纯黑；
宽度：50%；
高度：500px；
}

---

使用如下背景颜色：

.box{
高度：300px；
背景：
/*右下三角*/
线性渐变（至右下角，透明49.5%，蓝色50%），右下角，
/*左下三角*/
线性渐变（至左下角，透明49.5%，红色50%），左下角，
黄色的；
背景尺寸：50%40%；/*宽度高度*/
背景重复：无重复；
}

---

使用如下背景颜色：

.box{
高度：300px；
背景：
/*右下三角*/
线性渐变（至右下角，透明49.5%，蓝色50%），右下角，
/*左下三角*/
线性渐变（至左下角，透明49.5%，红色50%），左下角，
黄色的；
背景尺寸：50%40%；/*宽度高度*/
背景重复：无重复；
}

---

因为需要百分比值，所以可以使用

剪辑路径。请注意，某些浏览器可能不完全支持它，而某些浏览器可能需要前缀（例如
-webkit clip path
）

.wrap{
高度：200px；
宽度：100%；
位置：相对位置；
背景：#333；
}
.三角形{
背景：红色；
剪辑路径：多边形（0 40%，0%100%，100%100%）；
位置：绝对位置；
左：0；
底部：0；
排名：0；
宽度：50%；
}
.triangle.tr-right{
左：自动；
右：0；
剪辑路径：多边形（100%40%，0%100%，100%100%）；
}


使用创建的剪辑路径
因为需要百分比值，所以可以使用
剪辑路径
。请注意，某些浏览器可能不完全支持它，而某些浏览器可能需要前缀（例如
-webkit clip path
）

.wrap{
高度：200px；
宽度：100%；
位置：相对位置；
背景：#333；
}
.三角形{
背景：红色；
剪辑路径：多边形（0 40%，0%100%，100%100%）；
位置：绝对位置；
左：0；
底部：0；
排名：0；
宽度：50%；
}
.triangle.tr-right{
左：自动；
右：0；
剪辑路径：多边形（100%40%，0%100%，100%100%）；
}


使用创建的剪辑路径

*{
框大小：边框框；
}
.三角指针盒{
显示器：flex；
对齐项目：居中；
背景：#161616；
填充：20px；
左侧填充：120px；
高度：200px；
位置：相对位置；
宽度：80%；
}
.三角形指针框>h3{
颜色：#fff；
}
.三角指针盒：后{
内容：“；
宽度：0；
身高：0；
边框顶部：100px实心透明；
边框底部：100px实心透明；
左边框：100px实心#161616；
位置：绝对位置；
右：-100px；
排名：0；
}
.三角指针盒：之前{
内容：“；
宽度：0；
身高：0；
边框顶部：100px实心透明；
边框底部：100px实心透明；
左边框：100px实心#ffffff；
位置：绝对位置；
左：0；
排名：0；
}

标题在这里

*{
框大小：边框框；
}
.三角指针盒{
显示器：flex；
对齐项目：居中；
背景：#161616；
填充：20px；
左侧填充：120px；
高度：200px；
位置：相对位置；
宽度：80%；
}
.三角形指针框>h3{
颜色：#fff；
}
.三角指针盒：后{
内容：“；
宽度：0；
身高：0；
边框顶部：100px实心透明；
边框底部：100px实心透明；
左边框：100px实心#161616；
位置：绝对位置；
右：-100px；
排名：0；
}
.三角指针盒：之前{
内容：“；
宽度：0；
身高：0；
边框顶部：100px实心透明；
边框底部：100px实心透明；
左边框：100px实心#ffffff；
位置：绝对位置；
左：0；
排名：0；
}

标题在这里
尺寸是否总是硬编码，或者解决方案是否适合任何尺寸的容器？请检查并选择“类型：不等边”以适应尺寸。@elveti我不知道如何使用此选项制作直角三角形。它只会使两边均匀？@andrelange91选择“Scalene”类型，您可以单独更改尺寸（如果我正确理解您的需求），尺寸是否总是硬编码的，或者解决方案是否适合任何尺寸的容器？检查并选择“type:Scalene”适应大小。@elveti我不知道如何用这个做一个直角三角形。它只会使两边均匀？@andrelange91选择“Scalene”类型，您可以单独更改大小（如果我正确理解您的需求），但这并不能解决我的问题。它们不是40%的高度，它们在中间不相交，它们是和梅所同意的伪元素接近的，这并不能解决我的问题。它们不是40%的高度，它们在中间不相交，它们是和梅一样同意伪元素的方法，可以通过应用高度来简化和保持剪辑路径容易：可以通过应用来简化。
.wrap {
  height: 200px;
  width: 100%;
  position: relative;
  background: #333;
}
.triangle {
  background: red;
  clip-path: polygon(0 40%, 0% 100%, 100% 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 50%;
}
.triangle.tr-right {
  left: auto;
  right: 0;
  clip-path: polygon(100% 40%, 0% 100%, 100% 100%);
}

<div class="wrap">
  <div class="triangle tr-left"></div>
  <div class="triangle tr-right"></div>
</div>