Html 带边框的CSS三角形

首先是小提琴：

我需要一个css三角形，只有一个文本气泡的边框，背景应该是透明的

代码：

HTML:

CSS:

---

有人已经对这个问题给出了很好的答案：

---

为什么需要使用css？ 它只是个字节。对三角形使用html特殊几何形状：

Normal Triangle: △
Right Showing Triangle:  ▷  
Down Pointing Triangle: ▽ 
Left Pointing Triangle: ◁

它可以节省您的大量精力，并在互联网上更快地运行

⚠: 检查浏览器兼容性

---

完整的几何参考：

这不正是您已经拥有的吗？编辑：对不起，现在知道了。@JanneKlouman OP有一个黑色背景的三角形。OP只需要一个边界。这可能会有帮助。。。你在找类似的东西吗？这不需要任何额外的伪元素。这一边没有边框，但当你想在气泡中使用它时，你可能不需要那一边的边框。我在寻找一个跨浏览器的解决方案，hallow三角形问题非常类似。谢谢你。你应该把它标为副本。。不要抄袭别人的答案。谢谢@Luke，我想我没有用正确的答案搜索keyword@putvande对不起，你说得对，有点贪心：(

 .triangle { 
     position: relative;
     width: 20px;
     margin-top: 100px;
 }
 .triangle>div { 
     width: 20px;
     height: 2px;
     background: red;
     margin-top: 100px;
 }

 .triangle>div:before {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(56deg);
     -moz-transform: rotate(56deg);
     -ms-transform: rotate(56deg);
     transform: rotate(56deg);
     position: absolute;
     top: -8px;
     right: -5px;
 }
 .triangle>div:after {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(-56deg);
     -moz-transform: rotate(-56deg);
     -ms-transform: rotate(-56deg);
     transform: rotate(-56deg);
     position: absolute;
     top: -8px;
     left: -5px;
 }

Normal Triangle: △
Right Showing Triangle:  ▷  
Down Pointing Triangle: ▽ 
Left Pointing Triangle: ◁