使用CSS绘制基础的对话框图案的代码示例

1. #talkbubble {        margin-left:30px;   
2.    width: 120px;        height: 80px;    
3.    background: red;       position: relative;   
4.    -moz-border-radius:    10px;        -webkit-border-radius: 10px;    
5.    border-radius:         10px;    }   
6. #talkbubble:before {       content:"";   
7.    position: absolute;       rightright: 100%;   
8.    top: 26px;       width: 0;   
9.    height: 0;       border-top: 13px solid transparent;   
10.    border-right: 26px solid red;       border-bottom: 13px solid transparent;   
11. }  

其实，本案例的精华就是三角形的绘制，那么如何绘制三角形呢？我在这里总结一下！

上三角形，上三角形，顶部是尖的，所以用border-left，border-right，和border-bottom可以实现，给bottom一个颜色，其他设置为transparent

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表