Html 三角形边框

我想用底部透明的三角形来编码新闻的div边框，但左三角形边框不等于右三角形边框，你能解释一下为什么或者告诉我其他编码方法吗

我的代码：

.news{
位置：相对位置；
利润率：75px自动；
宽度：200px；
边框：1px#079199实心；
填充：20px；
颜色：#bcbc；
单词包装：打断单词；
}
.新闻：之后{
位置：绝对位置；
内容：''；
边框：25px实心透明；
边框顶部颜色：#FFF；
最高：100%；
左：50%；
}
.新闻：以前{
位置：绝对位置；
内容：''；
左边框：26px实心透明；
右边框：26px实心透明；
边框顶部：26px实心；
边框顶部颜色：#079199；
最高：100%；
左：50%；
}

试验

您正在从左侧定位两个

50%

。为了看到边框，您必须稍微向左偏移彩色的

：before

三角形

我们可以通过应用负的

左边距


.news{
位置：相对位置；
利润率：75px自动；
宽度：200px；
边框：1px#079199实心；
填充：20px；
颜色：#bcbc；
单词包装：打断单词；
}
.新闻：之后{
位置：绝对位置；
内容：''；
边框：25px实心透明；
边框顶部颜色：#FFF；
最高：100%；
左：50%；
}
.新闻：以前{
位置：绝对位置；
内容：''；
左边框：26px实心透明；
右边框：26px实心透明；
边框顶部：26px实心；
边框顶部颜色：#079199；
左边距：-1px；
最高：100%；
左：50%；
}

试验
由于两个伪元素的对齐错误，请尝试使用以下方法：


.news{
位置：相对位置；
利润率：75px自动；
宽度：200px；
边框：1px#079199实心；
填充：20px；
颜色：#bcbc；
单词包装：打断单词；
}
.新闻:之后,，
.新闻：以前{
位置：绝对位置；
内容：''；
边框：25px实心透明；
边框顶部颜色：#ffffff；
最高：100%；
左：50%；
转化：translateX（-50%）；
}
.新闻：以前{
边框：26px实心透明；
边框顶部颜色：#079199；
}

试验
也许我有点困惑，但哪里有三角形呢？谢谢你的帮助：）