Javascript 如何创建三角形而不是梯形的左/右边框？

我想要一个左右均为三角形的标签，但我只能创建梯形：

.borderLeft{
填充：0px 0px 0px 0px；
保证金：0px 0px 0px 0px；
右边框：0.5em实心橙色；
边框顶部：0.5em实心透明；
边框底部：0.5em实心透明；
}
.对{
填充：0px 0px 0px 0px；
保证金：0px 0px 0px 0px；
左边框：0.5em实心橙色；
边框顶部：0.5em实心透明；
边框底部：0.5em实心透明；
}

abcde

0.5em不足以形成三角形。因为td的高度是2米

.borderLeft{
填充：0px 0px 0px 0px；
保证金：0px 0px 0px 0px；
右边框：0.5em实心橙色；
边框顶部：1米实心透明；
边框底部：1米实心透明；
}
.对{
填充：0px 0px 0px 0px；
保证金：0px 0px 0px 0px；
左边框：0.5em实心橙色；
边框顶部：1米实心透明；
边框底部：1米实心透明；
}

abcde

您可以使用CSS技巧。这是一个标签示例（您可以更改边距和字体大小以匹配文本）

。向上箭头{
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：80px实心橙色；
}
.向上箭头>div{
位置：绝对位置；
边缘顶部：30px；
左边距：-30px；
字体大小：40px；
}

---

test

您可以使用after和before选择器来执行此操作

检查以下答案：

.main{
保证金：50px自动0；
宽度：200px；
高度：40px；
位置：相对位置；
背景：红色；
文本对齐：居中；
颜色：白色；
线高：40px；
/*垂直对齐文本的步骤*/
}
梅因：以前{
内容：“；
位置：绝对位置；
右：-20px；
底部：0；
宽度：0；
身高：0；
左边框：20px纯红；
边框顶部：20px实心透明；
边框底部：20px实心透明；
}
梅因：之后{
内容：“；
位置：绝对位置；
左：-40px；
底部：0；
宽度：20px；
身高：0；
左边框：20px纯红；
边框顶部：20px实心透明；
边框底部：20px实心透明；
变换：旋转（180度）；
}

ABCDE

试试这个：

.borderLeft{
填充：0px 0px 0px 0px；
保证金：0px 0px 0px 0px；
右边框：0.5em实心橙色；
边框顶部：0.5em实心透明；
边框底部：0.5em实心透明；
}
.对{
填充：0px 0px 0px 0px；
保证金：0px 0px 0px 0px；
左边框：0.5em实心橙色；
边框顶部：0.5em实心透明；
边框底部：0.5em实心透明；
}

abcde

使用

线性渐变

，您可以通过一个元素实现这一点，它将响应：

.box{
填充：10px 40px；
保证金：5px；
显示：内联块；
背景：
线性梯度（至右上角，橙色50%，透明50.5%），右上角/40px 50%，
线性渐变（至右下角，橙色50%，透明50.5%），右下角/40px 50%，
线性渐变（至左下角，橙色50%，透明50.5%），左下角/40px 50%，
线性渐变（至左上角，橙色50%，透明50.5%）左上角/40px 50%，
线性梯度（橙色，橙色）中心/钙（100%-80px）100%；
背景重复：无重复；
}

一些文本
looooooog文本
两行
文本
三条
行
文本