CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）
今天看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。
这里记录总结下
心形
原理：利用 圆形 和 正方形实现
HTML：
<div class="heartShaped">
<h1>heartShaped</h1>
</div>
CSS：
.heartShaped {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background: rgba(255, 20, 147, .85);
width: 140px;
line-height: 140px;
text-align: center;
color: white;
font-size: 12px;
}
.heartShaped:before, .heartShaped:after {
content: '';
position: absolute;
top:;
left: -70px;
width: 140px;
height: 140px;
border-radius: 50%;
background: rgb(255, 20, 147);
z-index: -1;
}
.heartShaped:after {
top: -70px;
left:;
}
气泡三角形
原理：利用 border 的 transparent 特性实现
HTML：
<div class="bubbly">
<p>heartShaped</p>
</div>
CSS：
.bubbly {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #00aabb;
border-radius: .4em;
width: 260px;
padding: 60px 20px;
text-align: center;
color: white;
font-size: 200%;
}
.bubbly:after {
content: '';
position: absolute;
bottom:;
left: 50%;
border: 34px solid transparent;
border-top-color: #00aabb;
border-bottom:;
border-left:;
margin: 0 0 -34px -17px;
}
切角
原理：使用线性渐变实现
HTML：
<div class="notching">
<p>heartShaped</p>
</div>
CSS：
.notching {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
padding: 60px 20px;
text-align: center;
color: white;
font-size: 200%;
}
.notching {
background: linear-gradient(135deg, transparent 15px, deeppink 0) top left, linear-gradient(-135deg, transparent 15px, deeppink 0) top right, linear-gradient(-45deg, transparent 15px, deeppink 0) bottom right, linear-gradient(45deg, transparent 15px, deeppink 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
弧形切角
原理：使用径向渐变实现
HTML：
<div class="arc">
<p>arc</p>
</div>
CSS：
.arc {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
}
.arc {
background: radial-gradient(circle at top left, transparent 15px, yellowgreen 0) top left, radial-gradient(circle at top right, transparent 15px, yellowgreen 0) top right, radial-gradient(circle at bottom right, transparent 15px, yellowgreen 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, yellowgreen 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
单个颜色实现 hover 和 active 时的明暗变化效果
原理：利用伪类及透明度实现
HTML：
<div class="pesudo">
<p>pesudo</p>
</div>
CSS：
.pesudo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
border-radius: 1em;
background: #00aabb;
cursor: pointer;
}
.pesudo:before {
position: absolute;
top:;
right:;
bottom:;
left:;
z-index: -1;
border-radius: 1em;
background: rgba(0, 0, 0, .1);
}
.pesudo:hover:before {
content: "";
}
.pesudo:after {
position: absolute;
top:;
right:;
bottom:;
left:;
z-index: -1;
border-radius: 1em;
background: rgba(255, 255, 255, .2);
}
.pesudo:active:after {
content: "";
}
梯形
原理：利用伪类加旋转透视实现
HTML：
<div class="trapezoid">
<p>trapezoid</p>
</div>
CSS
.trapezoid {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
}
.trapezoid:before {
content: "";
position: absolute;
top:;
right:;
bottom:;
left:;
transform: perspective(40px) scaleY(1.3) rotateX(5deg);
transform-origin: bottom;
background: deeppink;
z-index: -1;
}
饼图
原理：利用伪类、线性渐变、旋转实现
HTML：
<div class="pie">
<p>pie</p>
</div>
CSS
.pie {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: white;
font-size: 200%;
background-color: yellowgreen;
overflow: hidden;
background-image: linear-gradient(to right, transparent 50%, #655 0);
cursor: pointer;
}
.pie:before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: inherit;
transform-origin: left;
z-index: -1;
transform: rotate(.1turn);
}
.pie:hover:before {
transition: all 1s;
transform: rotate(.45turn);
}
平行四边形
原理：利用伪类、拉伸实现
HTML:
<div class="parallelogram">
<p>parallelogram</p>
</div>
CSS
.parallelogram {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
line-height: 150px;
text-align: center;
color: white;
font-size: 200%;
}
.parallelogram:before {
content: '';
position: absolute;
top:;
right:;
bottom:;
left:;
background-color: #00aabb;
z-index: -1;
transform: skew(.08turn);
}
菱形
原理：利用伪类、旋转实现
HTML:
<div class="diamond">
<p>diamond</p>
</div>
CSS
.diamond {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
text-align: center;
color: white;
font-size: 200%;
}
.diamond:before {
content: '';
position: absolute;
top:;
right:;
bottom:;
left:;
background-color: deeppink;
z-index: -1;
transform: rotateZ(45deg);
}
折角
原理：利用切角、伪类、渐变、旋转实现
HTML:
<div class="corner">
<p>corner</p>
</div>
CSS
.corner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
line-height: 120px;
padding: 40px;
text-align: center;
color: white;
font-size: 200%;
background: linear-gradient(-150deg, transparent 1.5em, yellowgreen 0);
border-radius: .5em;
}
.corner:before {
content: '';
position: absolute;
top:;
right:;
background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;
width: 1.73em;
height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
}
spectiveBlur
纯 CSS 方案实现背景变暗效果（hover按钮触发）
HTML:
<div class="spectiveBlur">
<p>spectiveBlur</p>
</div>
CSS
.spectiveBlur {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
line-height: 160px;
transform: translate(-50%, -50%);
border-radius: 10px;
overflow: hidden;
background: #E91E63;
color: #fff;
font-size: 200%;
text-align: center;
cursor: pointer;
transition: transform .2s;
}
.spectiveBlur:hover {
box-shadow: 0 0 0 1920px rgba(0, 0, 0, .7);
transform: translate(-50%, -50%) scale(1.2);
}
条纹背景图
原理：利用渐变实现
HTML
<div class="stripe">
<p>stripe</p>
</div>
CSS
.stripe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
text-align: center;
color: white;
font-size: 200%;
background: deeppink;
border-radius: .5em;
background: repeating-linear-gradient(45deg, #CC9999, #CC9999 15px, #CCCCCC 0, #CCCCCC 30px)
}
晴天（sun）（单标签实现）
原理：利用线性渐变、阴影、旋转实现
HTML：
<div class="sun">
<p>sun</p>
</div>
CSS
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 260px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 200%;
color: #fff;
background: #0BF;
border-radius: 5px;
}
.sun:before {
content: "";
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 238, 68, 1);
box-shadow: 0 0 0 15px rgba(255, 255, 0, 0.2), 0 0 15px #fff;
z-index: -10;
}
.sun:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 160px;
width: 160px;
transform: translate(-50%, -50%) rotate(30deg);
z-index: -100;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
background-size: 20px 100%, 100% 20px;
background-repeat: no-repeat;
background-position: center center, center center;
animation: sunRotate 10s linear infinite;
}
@keyframes sunRotate {
0% {
transform: translate(-50%, -50%) rotate(30deg);
}
100% {
transform: translate(-50%, -50%) rotate(390deg);
}
}
多云（cloudy）（单标签实现）
原理：利用线性渐变、阴影、缩放实现
HTML
<div class="cloudy">
<p>cloudy</p>
</div>
CSS
.cloudy {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 260px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 200%;
color: #fff;
background: #2EB5E5;
border-radius: 5px;
}
.cloudy:before {
content: "";
text-indent: 23px;
font-size: 22px;
line-height: 40px;
color: #333;
position: absolute;
height: 50px;
width: 50px;
background: #FFFFFF;
left: 30%;
top: 45%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: #FFFFFF 65px -15px 0 -5px, #FFFFFF 25px -25px, #FFFFFF 30px 10px, #FFFFFF 60px 15px 0 -10px, #FFFFFF 85px 5px 0 -5px, #C8C8C8 35px -35px, #C8C8C8 66px -27px 0 -5px, #C8C8C8 91px -10px 0 -8px;
animation: cloudy 5s ease-in-out infinite;
}
.cloudy:after {
content: "";
position: absolute;
top: 80%;
left: 50%;
height: 15px;
width: 120px;
background: rgba(0, 0, 0, .5);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
50% {
transform: translate(-50%, -70%);
}
100% {
transform: translate(-50%, -50%);
}
}
@keyframes cloudy_shadow {
50% {
transform: translate(-50%, -50%) scale(0.8);
background: rgba(0, 0, 0, .2);
}
100% {
transform: translate(-50%, -50%) scale(1);
background: rgba(0, 0, 0, .5);
}
}
更多效果可以参考原网站：CSS实现各种图形
PS：这些CSS效果都是奇技淫巧，不过可以加深对CSS样式的理解，值得尝试
CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）的更多相关文章
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- css3实现三角形，聊天背景气泡，心形等形状
1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...
- css画心形、三角形的总结
.heart { width: 10px; height: 10px; /* position: fixed; */ background: #fff; transform: rotate(45deg ...
- css实现心形图案
用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...
- CSS实现心形、六角星、六边形、平行四边形等几何
本文将利用border属性实现简单几何的绘制: 效果图: 正八角星 说明:采用两个正方形以中心进行旋转叠加: /* 八角星 */ #burst-8 { background: #6376ff1f; w ...
- CSS图形基础：纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- CSS 不规则图形绘制
基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
随机推荐
- C# 带偏移量自定义分页方法
/// <summary> /// 带偏移量自定义分页方法 /// </summary> /// <param name="PageSize"> ...
- Django学习-11-请求相关信息
requests对象是由类创建的 from django.core.handlers.wsgi import WSGIRequest --> 类 request.environ中封装了请求 ...
- 命令行工具osql.exe使用
目标: 快速在21个库修改Test表的某条记录,这几个库都分别在不同的服务器上. 通常会想到,到每个库都执行一下语句不就好了吗?这个数据库切换来切换去,挺麻烦了,通过命令行工具osql.exe就可以快 ...
- WPF自学入门（二）WPF-XAML布局控件
上一篇介绍了xaml基本知识,我们已经知道了WPF简单的语法.那么接下来,我们要认识一下WPF的布局容器.布局容器可以使控件按照分类显示,我们一起来看看WPF里面可以使用哪些布局容器用来布局. 在WP ...
- Python Web-第四周-Programs that Surf the Web（Using Python to Access Web Data）
1.Understanding HTML 1.最简单的爬虫 import urllib fhand=urllib.urlopen('http://www.dr-chuck.com/page1.htm' ...
- TCP/IP协议三次握手与四次握手流程解析(转)
一.TCP报文格式 下面是TCP报文格式图: 上图中有几个字段需要重点介绍下: (1)序号:Seq序号,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行标 ...
- Luogu 3375 【模板】KMP字符串匹配（KMP算法）
Luogu 3375 [模板]KMP字符串匹配(KMP算法) Description 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来 ...
- c#开发wps插件
wps 2016版比旧版感觉大气多了,加载速度快,操作方便,一直是wps的优点.随着wps的稳定性提高(当然比office还是差了很多),政府等一些部门采用几乎免费的wps来办公.我们公司决定把业务扩 ...
- 【高斯消元】BZOJ3503 [Cqoi2014]和谐矩阵
3503: [Cqoi2014]和谐矩阵 Time Limit: 10 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 1197 Solved: ...
- [转]svn diff 替代工具
svn diff 替代工具 http://blog.csdn.net/fudesign2008/article/details/8168811 一. 使用vimdiff替换svn diff: 对于多数 ...