css3实现三角形,聊天背景气泡,心形等形状

1、聊天背景气泡:

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

  

时间: 2024-10-28 23:35:50

css3实现三角形,聊天背景气泡,心形等形状的相关文章

CSS3 仿微信聊天小气泡

今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家看看页面的样子吧,如下图所示: 小月博客仿微信聊天界面 页面大致就是这个样子,接下来我们来一起学习制作步骤吧. 第一部分: HTML <div class="leftd">     <span ng-class="leftd_h">       

css3 perspective transform 心形

CSS3挺有趣的,能实现不少动画,以下为娱乐内容 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form

CSS3心形效果代码

利用css3实现了心形效果,并且还能够跳动. 代码实例如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:767273102 技术分享,欢迎基础小伙伴</ti

超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 <canvas> 元素. 贴士:全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special 尤雨溪个人主页炫彩三角纽带效果,点击还可变换 GitHub源码 . Demo演示 知乎登录注册页动态离子背景效果 GitHub源码 . Demo演

用循环制作的 心形图案

class Program { static void Main(string[] args) { Console.WriteLine("输入4-15的数可以出现不同的心"); Console.WriteLine("输入“q”或“Q”退出"); Console.WriteLine("请输入:"); string s = Console.ReadLine(); //判断用户输入的是否是q while (s.ToUpper() !="Q&q

CSS实现心形、六角星、六边形、平行四边形等几何

本文将利用border属性实现简单几何的绘制: 效果图: 正八角星 说明:采用两个正方形以中心进行旋转叠加: /* 八角星 */ #burst-8 { background: #6376ff1f; width: 80px; height: 80px; position: relative; text-align: center; transform: rotate(20deg); } #burst-8:before { content: ""; position: absolute;

心形动画

<!doctype html><html><head><meta charset="utf-8"><title>心形动画代码</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>body { background:black;}.heart

[控件] 心形加载的view

心形加载的view 效果: 素材图片: 源码: StarView.h 与 StarView.m // // StarView.h // Star // // Created by XianMingYou on 15/3/13. // Copyright (c) 2015年 XianMingYou. All rights reserved. // #import <UIKit/UIKit.h> @interface StarView : UIView @property (nonatomic,

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了