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

如果你想要其他方位的尖角，就调整boder-color的顺序（上，右，下，左）。

主要的原理大概是有两个一样形状，比例不同的小三角，一个和底色一样的实心三角bot，一个白色底的top，并且top是会盖在bot上面的，然后调整它们的大小。

最后想尽一切办法让它们重合（白色的top在上面，实心的bot在下面），最后通过调整绝对定位的参数（left，top）让其重合的天衣无缝。

以上就是css实现带尖角对话框的代码，需要的朋友可以参考，希望对大家学习css有帮助。