1,先了解一下三角形的css
.triangle_left { width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #6bbf20; border-bottom: 70px solid transparent; } <div class="triangle_left"></div>
一个左三角就这样形成了。。
下面来做做这个消息框了,左边那个框框简单,那么右边这个白底有边框的三角形怎么做的呢,我的思路是,将一个纯白色的三角形覆盖到有颜色的三角形上面并偏移一个象素
.arrow { width: 100px; height: 40px; border: 1px solid #61BACB; border-radius: 5px; position: relative; margin:10px; } .t-right-n { display: block; width: 0; height: 0; border-top: 5px solid transparent; border-left: 8px solid #61BACB; border-bottom: 5px solid transparent; position: absolute; top: 13px; right: -8px; z-index: 0; } .t-right-n>span{ display: block; width: 0; height: 0; border-top: 5px solid transparent; border-left: 8px solid #ffffff; border-bottom: 5px solid transparent; position: absolute; top: -5px; right: 1px; z-index: 1; } <div class="arrow"> <span class="t-right-n"><span></span></span> </div>