如何使用css创建三角形

请任何人帮助我如何创建下面的图表使用css

    ________/\_______
   |                |
   |                |
   |                |
   |________________|

---

请帮助我如何使用css来完成。并且只应使用div。

此代码用于创建三角形：

HTML:
<div id="talkbubble"></div>

CSS:
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
    margin-top: 50px;
}
#talkbubble:before {
   content: "";
position: absolute;
right: 43%;
bottom: 100%;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-bottom: 25px solid red;
border-right: 11px solid transparent;
}

HTML：
CSS:
#空谈{
宽度：120px；
高度：80px；
背景：红色；
位置：相对位置；
边缘顶部：50px；
}
#谈话泡泡：以前{
内容：“；
位置：绝对位置；
右：43%；
底部：100%；
宽度：0；
身高：0；
左边框：13px实心透明；
边框底部：25px纯红；
右边框：11px实心透明；
}

请参见此处的演示：

请参见此处：

---

你搜索过现有的问题了吗，伙计？提示：

边框样式：纯色dahsed

我在做了一些之后问上面的三角形@diecho。现在，您需要做的就是找出如何在顶部对齐。这里还有一个：

.box {
    position: relative;
    border: 1px solid #000;
    height:100px;
    width:300px;
    margin-top:100px;
    background:#fff;
}
.box:after, .box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 30px;
    margin-left: -30px;
}
.box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #000;
    border-width: 31px;
    margin-left: -31px;
}