用css怎样完成一个带尖角对话框效果？

　　一、用css怎样实现一个带尖角对话框效果？我们在一些聊天窗口，常能看到带尖角的对话框，那么这种对话框是怎样做的呢？其实现实这种对话框效果并不困难，这篇文章就给大家分享一下用CSS实现带尖角对话框效果的示例。
 
　　二、效果
 
 
 
　　三、代码
 
　　css;toolbar:false"><style>
　　#talkbubble {
　　  width: 160px; height: 80px;
　　  background: red;
　　  position: relative;
　　  border-radius: 10px;
　　  margin-left:20px;
　　}
　　#talkbubble:before {
　　  content: "";
　　  position: absolute;
　　  right: 100%;
　　  top: 26px;
　　  border-top: 13px solid transparent;
　　  border-right: 26px solid red;
　　  border-bottom: 13px solid transparent;
　　}
　　</style>
　　<div id="talkbubble"></div>
　　补充：纯css实现气泡对话框尖角处理
 
　　先来看一下效果图：
 
 
 
　　简单粗暴上代码：
 
　　html：             
 
　　    <div class="dialog-box">
　　                      <span class="bot"></span>
　　                      <span class="top"></span>
　　                    </div>
　　less:
　　      .dialog-box {
　　        position: relative;
　　        span {
　　          width:0;
　　          height:0;
　　          font-size:0;
　　          overflow:hidden;
　　          position:absolute;
　　          &.bot{
　　            border-width: 15px;
　　            border-style: solid dashed dashed;
　　            border-color: transparent transparent #F9743A transparent;
　　            left: 15px;
　　            top: -29px;
　　          }
　　          &.top{
　　            border-width:13px;
　　            border-style:solid dashed dashed;
　　            border-color:transparent transparent #fff transparent;
　　            left:17px;
　　            top:-25px;
　　          }
　　        }
　　      }