css3实现三角形,聊天背景气泡,心形等形状
2015-03-19 15:37
901 查看
1、聊天背景气泡:
css代码如下:
2、心形:
css代码如下:
3、正三角形:
css代码如下:
4、倒三角形:
css代码如下:
css代码如下:
#talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }
2、心形:
css代码如下:
#heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red;-moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);<br> transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
3、正三角形:
css代码如下:
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
4、倒三角形:
css代码如下:
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
相关文章推荐
- css实现聊天气泡以及形状--边框法
- C#绘制三角形并填充,使用winform实现qq聊天气泡
- <UI>实现背景拉伸的方法(聊天气泡)
- css3实现聊天气泡
- css3实现三角形、扇形和特殊的形状等
- CSS3实现兼容性的渐变背景效果
- WindowLess RichEdit 实现QQ聊天窗口的气泡效果,设计思路和方法。
- 【HTML5】实现QQ聊天气泡效果
- css3,filter实现背景背景渐变的效果
- 利用css实现聊天气泡
- android实现聊天页面的气泡
- 用border-image实现QQ气泡聊天窗效果
- css实现聊天气泡效果
- css实现三角形形状
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景
- 实现仿照微信聊天气泡里显示图片效果的自定义View
- html5 实现qq聊天的气泡效果
- 仿微信聊天气泡效果实现,有源代码(一)
- CSS3 仿微信聊天小气泡
- CSS3 实现背景透明,文字不透明,兼容所有浏览器