直接上代码，不多说了！
画三角形
1）、
<style type="text/css">
.triangle{
width: 0;
height: 0;
/*border: 50px transparent solid;*//*当没有这句时，至少有2个方向的边框才能成形，比如下面的一组*/ border-top: 50px solid black;
border-right: 50px solid purple;
/*border-bottom: 50px solid blue;
border-left: 50px solid red;*/
}
</style>
<div class="triangle"></div>
2）、
<style type="text/css">
.triangle1{
width: 0;
height: 0;
border: 50px transparent solid;/*transparent表示边框颜色是透明的，solid表示边框是实线的*/
border-top-color: black;
border-bottom-color: black;
}
</style>
<div class="triangle1"></div>
3)、类似QQ或微信中的提示框，带有三角形的框
<style type="text/css">
.wechat-triangle{
position: relative;
width: 150px;
height: 36px;
border: 1px solid black;
border-radius: 5px;
background: rgba(245, 245, 245, 1);
} /*.wechat-triangle:before{
content: "";
display: block;
position: absolute;
top: 8px;
width: 0;
height: 0;
border: 6px transparent solid;
left: -12px;
border-right-color: rgba(245,245,245,1);
}*/ .wechat-triangle:before, .wechat-triangle:after{
content: "";
display: block;
position: absolute;
top: 8px;
width: 0;
height: 0;
border: 6px transparent solid;
} .wechat-triangle:before{
left: -11px;
border-right-color: rgba(245,245,245,1);
z-index: 1;
} .wechat-triangle:after{
left: -12px;
border-right-color: rgba(0,0,0,1);
z-index: 0;
} .wechat-triangle1{
width: 120px;
height: 30px;
position: relative;
border: 1px solid black;
border-radius: 5px;
background: rgba(245,245,245,1);
} .wechat-triangle1:before, .wechat-triangle1:after{
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
top: 5px;
border: 4px transparent solid;
} .wechat-triangle1:before{
left: -8px;
border-right-color: rgba(245,245,245,1);
z-index: 1;
} .wechat-triangle1:after{
left: -9px;
border-right-color: rgba(0,0,0,1);
z-index: 0;
}
</style> <div class="wechat-triangle"></div>
<div class="wechat-triangle1"></div>
其中rgba是由颜色与透明度组成，透明度是[0,1]。
4）、提示框，当鼠标放到上面时，就会有提示信息
<style>
.tip{
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
position: relative;
border: 1px solid #ccc;
cursor: pointer;
} .tip:before, .tip:after{
position: absolute;
opacity: 0;
} .tip:before{
content: '';
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
border-color: #222 transparent transparent transparent;
top: -6px;
} .tip:after{
content: attr(data-tips);
white-space: nowrap;
font-size: 14px;
color: #fff;
background-color: #222;
top: -36px;
left: 5px;
border-radius: 6px;
padding: 0 10px;
text-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-sizing: boder-box;
-webkit-box-sizing: boder-box;
box-sizing: boder-box;
} .tip:hover:before, .tip:hover:after{
opacity: 1;
}
</style>
<div class="tip" data-tips="沉冤得雪魂归战场">琅琊榜</div>