Html CSS网格中的纯CSS箭头div

是否有一种方法可以在CSS中创建类似的内容，但更灵活（例如在CSS网格单元中使用）？——原稿

#三角形{
保证金：3em；
宽度：0；/*将DIV的尺寸设置为0，以便边框折叠和触摸*/
身高：0；
边框颜色：红蓝绿黄；/*上边框、右边框、下边框和左边框*/
边框样式：实心；
边框宽度：50px；/*每个边框的宽度*/
}

---

您可以使用

线性渐变

轻松创建这些三角形。可以考虑单独的类（如下面的类），或者将它们作为一个元素在多个背景中使用。

#三角形{
宽度：100px；
高度：100px；
显示：内联块；
}
#三角形分区{
身高：100%；
}
左{
背景：
线性渐变（左上角，透明50%，红色0）0 100%/50%50%无重复，
线性渐变（至左下角，透明50%，红色0）0 0/50%50%无重复；
}
对{
背景：
线性渐变（至右上角，透明50%，黄色0）100%100%/50%50%无重复，
线性渐变（至右下角，透明50%，黄色0）100%0/50%50%无重复；
}
.tr顶部{
背景：
线性渐变（至右上角，透明50%，绿色0）0 0/50%50%无重复，
线性渐变（左上角，透明50%，绿色0）100%0/50%50%无重复；
}
.tr底部{
背景：
线性渐变（至右下角，透明50%，蓝色0）0 100%/50%50%无重复，
线性渐变（至左下角，透明50%，蓝色0）100%100%/50%50%无重复；
}

---

您可以使用

线性渐变

轻松创建这些三角形。可以考虑单独的类（如下面的类），或者将它们作为一个元素在多个背景中使用。

#三角形{
宽度：100px；
高度：100px；
显示：内联块；
}
#三角形分区{
身高：100%；
}
左{
背景：
线性渐变（左上角，透明50%，红色0）0 100%/50%50%无重复，
线性渐变（至左下角，透明50%，红色0）0 0/50%50%无重复；
}
对{
背景：
线性渐变（至右上角，透明50%，黄色0）100%100%/50%50%无重复，
线性渐变（至右下角，透明50%，黄色0）100%0/50%50%无重复；
}
.tr顶部{
背景：
线性渐变（至右上角，透明50%，绿色0）0 0/50%50%无重复，
线性渐变（左上角，透明50%，绿色0）100%0/50%50%无重复；
}
.tr底部{
背景：
线性渐变（至右下角，透明50%，蓝色0）0 100%/50%50%无重复，
线性渐变（至左下角，透明50%，蓝色0）100%100%/50%50%无重复；
}

---

或者，您可以使用SVG实现这一点

快点

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：100vw；
高度：100vh；
背景色：#F9F871；
}
.svg框{
宽度：30vw；
保证金：0自动；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.顶{
填充：#845EC2；
}
.左{
填充：#D65DB1；
}
.底部{
填充：#FF9671；
}
.对{
填充：#FFC75F；
}

---

或者，您可以使用SVG实现这一点

快点

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：100vw；
高度：100vh；
背景色：#F9F871；
}
.svg框{
宽度：30vw；
保证金：0自动；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.顶{
填充：#845EC2；
}
.左{
填充：#D65DB1；
}
.底部{
填充：#FF9671；
}
.对{
填充：#FFC75F；
}

什么是更灵活？我的意思是三角形相对于网格中围绕它们的其余形状收缩和增长？什么是更灵活？我的意思是三角形相对于网格中围绕它们的其余形状收缩和增长