如何使用css创建三角形[重复]答案

【问题标题】：how create triangle using css [duplicate]如何使用css创建三角形[重复]
【发布时间】：2015-03-07 09:10:36
【问题描述】：

请任何人帮助我如何使用 css 创建下图。

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

请帮助我如何使用 css 完成它。只有 div 应该使用。

【问题讨论】：

你搜索过现有的问题吗？
提示：border-style: solid dahsed
我在问上面的三角形@diEcho
做了一些minor changes之后。现在，您需要做的就是弄清楚如何将其与顶部对齐。
这里还有一个：jsfiddle.net/pnmzsoLj/1

标签： css

【解决方案1】：

请看这里：http://jsfiddle.net/alexwcoleman/6ue8vvba/

.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;
}

【讨论】：

【解决方案2】：

此代码用于创建三角形：

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;
}

在这里查看演示：DEMO

【讨论】：